如何在 TypeScript 中以编程方式折叠一个 p-fieldset。

huangapple
go评论101阅读模式
英文:

How to programmatically collapse a p-fieldset in typescript

问题

我需要在打开另一个字段集时折叠一个字段集。我尝试设置属性并使用布尔值来更改字段集的折叠属性状态，但似乎没有效果。更改布尔值似乎在第一次工作，但在onAfterToggle事件中不起作用。

  1. <p-fieldset [collapsed]="collapseCalendar" id="calendarFieldset" [toggleable]="true" (onAfterToggle)="fieldSetClicked($event)"></p-fieldset>
  1. fieldSetClicked(event){
  2.   var calendarFieldset = <HTMLInputElement>document.getElementById("calendarFieldset");
  3.   var exportFieldset = <HTMLInputElement>document.getElementById("exportFieldset");
  4.   var importFieldset = <HTMLInputElement>document.getElementById("importFieldset");
  6.   if(event.originalEvent.target.innerText === "Customization" && event.collapsed === false){
  7.     //close rest
  8.     exportFieldset.setAttribute('collapsed', "true");
  9.     importFieldset.setAttribute('collapsed', "true");
  10.     this.collapseExport = true;
  11.     this.collapseImport = true;
  12.   }
  13. }

我尝试过更改属性状态并为折叠标签设置布尔值。

英文:

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

  1. &lt;p-fieldset [collapsed]=&quot;collapseCalendar&quot; id=&quot;calendarFieldset&quot; [toggleable]=&quot;true&quot; (onAfterToggle)=&quot;fieldSetClicked($event)&quot; &gt;

</p-fieldset>

  1. fieldSetClicked(event){
  2. var calendarFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;calendarFieldset&quot;);
  3. var exportFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;exportFieldset&quot;);
  4. var importFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;importFieldset&quot;);
  6. if(event.originalEvent.target.innerText === &quot;Customization&quot; &amp;&amp; event.collapsed === false){
  7.   //close rest
  8.   exportFieldset.setAttribute(&#39;collapsed&#39;, &quot;true&quot;);
  9.   importFieldset.setAttribute(&#39;collapsed&#39;, &quot;true&quot;);
  10.   this.collapseExport = true;
  11.   this.collapseImport = true;
  12. }

I have tried changing the attribute state and setting a boolean value for the collapsed tag

答案1

得分: 2

如果您的组件只包含这三个 p-fieldset，您可以执行以下操作：

  1. 使用 @ViewChildren 读取所有 FieldSet，如下所示：
  1.   @ViewChildren(Fieldset) fields: QueryList<Fieldset>;
  1. 在您的组件中实现 AfterViewInit，并在 ngAfterViewInit() 内部执行以下操作：
  1.   this.fields.forEach((field) => {
  2.       this.collapsedState[field.id] = field.collapsed;
  3.     });

  1. 在您的模板中：

    • 为每个 p-filedSet 组件添加唯一的模板引用，并使用 (onAfterToggle)=yourFunction(templateRef)，根据 collapsedState 对象的值更改 collapsed 属性，如下所示：
  1. <p-fieldset
  2.   legend="Header"
  3.   #dd
  4.   [collapsed]="collapsedState[dd.id] ?? false"
  5.   [toggleable]="true"
  6.   (onAfterToggle)="collapseOther(dd)"
  7. >

实现 collapseOther 函数：

  1.   collapseOther(toggledField: Fieldset) {
  2.     if (toggledField.collapsed) {
  3.       return;
  4.     }
  5.     // 获取其他未被切换的元素
  6.     const otherEls = this.fields.filter((el) => el.id != toggledField.id);
  7.     
  8.     for (let fieldId of Object.keys(this.collapsedState)) {
  9.       const fieldSetCollapsed = otherEls.some((el) => el.id == fieldId)
  10.         ? true
  11.         : false;
  12.       this.collapsedState[fieldId] = fieldSetCollapsed;
  13.     }
  14.   }
  15. }

这个方法是一个变通方法，但对我来说有效。

英文:

If you only have these three p-fieldset inside your component your can do the following:
1- Read all FieldSet using @ViewChildren like that:

  1.   @ViewChildren(Fieldset) fields: QueryList&lt;Fieldset&gt;;

3- Declear an object of key value, key is an id of filedSet and the value represents the collapse state

  1.   collapsedState: { [id: string]: boolean } = {};

2- implement AfterViewInit in your component and inside ngAfterViewInit()

  1.   this.fields.forEach((field) =&gt; {
  2.       this.collapsedState[field.id] = field.collapsed;
  3.     });

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:

  1. &lt;p-fieldset
  2.   legend=&quot;Header&quot;
  3.   #dd
  4.   [collapsed]=&quot;collapsedState[dd.id] ?? false&quot;
  5.   [toggleable]=&quot;true&quot;
  6.   (onAfterToggle)=&quot;collapseOther(dd)&quot;
  7. &gt;

Implementation of collapseOther function:

  2.   collapseOther(toggledField: Fieldset) {
  3.     if (toggledField.collapsed) {
  4.       return;
  5.     }
  6.     //take other not toggled elements
  7.     const otherEls = this.fields.filter((el) =&gt; el.id != toggledField.id);
  8.     
  9.     for (let filedId of Object.keys(this.collapsedState)) {
  10.       const fieldSetCollapsed = otherEls.some((el) =&gt; el.id == filedId)
  11.         ? true
  12.         : false;
  13.       this.collapsedState[filedId] = fieldSetCollapsed;
  14.     }
  15.   }
  16. }

> It's a workaround but it works for me.

huangapple
  • 本文由 发表于 2023年7月12日 22:48:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76671847.html
  • angular
  • html
  • javascript
  • primeng
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定