英文:
How to programmatically collapse a p-fieldset in typescript
问题
我需要在打开另一个字段集时折叠一个字段集。我尝试设置属性并使用布尔值来更改字段集的折叠属性状态，但似乎没有效果。更改布尔值似乎在第一次工作，但在onAfterToggle事件中不起作用。
<p-fieldset [collapsed]="collapseCalendar" id="calendarFieldset" [toggleable]="true" (onAfterToggle)="fieldSetClicked($event)"></p-fieldset>
fieldSetClicked(event){
var calendarFieldset = <HTMLInputElement>document.getElementById("calendarFieldset");
var exportFieldset = <HTMLInputElement>document.getElementById("exportFieldset");
var importFieldset = <HTMLInputElement>document.getElementById("importFieldset");
if(event.originalEvent.target.innerText === "Customization" && event.collapsed === false){
//close rest
exportFieldset.setAttribute('collapsed', "true");
importFieldset.setAttribute('collapsed', "true");
this.collapseExport = true;
this.collapseImport = true;
}
}
我尝试过更改属性状态并为折叠标签设置布尔值。
英文:
I need to collapse a fieldset when another is opened. I have tried setting the attribute and using a Boolean to change the state of the fieldset collapsed attribute but nothing seems to work. Changing the Boolean value seems to work the first time but not onAfterToggle event
<p-fieldset [collapsed]="collapseCalendar" id="calendarFieldset" [toggleable]="true" (onAfterToggle)="fieldSetClicked($event)" >
</p-fieldset>
fieldSetClicked(event){
var calendarFieldset = <HTMLInputElement>document.getElementById("calendarFieldset");
var exportFieldset = <HTMLInputElement>document.getElementById("exportFieldset");
var importFieldset = <HTMLInputElement>document.getElementById("importFieldset");
if(event.originalEvent.target.innerText === "Customization" && event.collapsed === false){
//close rest
exportFieldset.setAttribute('collapsed', "true");
importFieldset.setAttribute('collapsed', "true");
this.collapseExport = true;
this.collapseImport = true;
}
I have tried changing the attribute state and setting a boolean value for the collapsed tag
答案1
得分: 2
如果您的组件只包含这三个 p-fieldset，您可以执行以下操作：
- 使用
@ViewChildren读取所有 FieldSet，如下所示：
@ViewChildren(Fieldset) fields: QueryList<Fieldset>;
- 在您的组件中实现
AfterViewInit，并在ngAfterViewInit()内部执行以下操作：
this.fields.forEach((field) => {
this.collapsedState[field.id] = field.collapsed;
});
-
在您的模板中：
- 为每个
p-filedSet组件添加唯一的模板引用，并使用(onAfterToggle)=yourFunction(templateRef)，根据collapsedState对象的值更改collapsed属性，如下所示：
- 为每个
<p-fieldset
legend="Header"
#dd
[collapsed]="collapsedState[dd.id] ?? false"
[toggleable]="true"
(onAfterToggle)="collapseOther(dd)"
>
实现 collapseOther 函数：
collapseOther(toggledField: Fieldset) {
if (toggledField.collapsed) {
return;
}
// 获取其他未被切换的元素
const otherEls = this.fields.filter((el) => el.id != toggledField.id);
for (let fieldId of Object.keys(this.collapsedState)) {
const fieldSetCollapsed = otherEls.some((el) => el.id == fieldId)
? true
: false;
this.collapsedState[fieldId] = fieldSetCollapsed;
}
}
}
这个方法是一个变通方法，但对我来说有效。
英文:
If you only have these three p-fieldset inside your component your can do the following:
1- Read all FieldSet using @ViewChildren like that:
@ViewChildren(Fieldset) fields: QueryList<Fieldset>;
3- Declear an object of key value, key is an id of filedSet and the value represents the collapse state
collapsedState: { [id: string]: boolean } = {};
2- implement AfterViewInit in your component and inside ngAfterViewInit()
this.fields.forEach((field) => {
this.collapsedState[field.id] = field.collapsed;
});
The above function will iterate over the fields and add the initial state
inside your template:
1- Add a unique template reference for each p-filedSet component and (onAfterToggle)=yourFunction(templateRef),collapsed property will change according to the object of collapsedState like that:
<p-fieldset
legend="Header"
#dd
[collapsed]="collapsedState[dd.id] ?? false"
[toggleable]="true"
(onAfterToggle)="collapseOther(dd)"
>
Implementation of collapseOther function:
collapseOther(toggledField: Fieldset) {
if (toggledField.collapsed) {
return;
}
//take other not toggled elements
const otherEls = this.fields.filter((el) => el.id != toggledField.id);
for (let filedId of Object.keys(this.collapsedState)) {
const fieldSetCollapsed = otherEls.some((el) => el.id == filedId)
? true
: false;
this.collapsedState[filedId] = fieldSetCollapsed;
}
}
}
> It's a workaround but it works for me.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论