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

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

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

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

</p-fieldset>

fieldSetClicked(event){
var calendarFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;calendarFieldset&quot;);
var exportFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;exportFieldset&quot;);
var importFieldset = &lt;HTMLInputElement&gt;document.getElementById(&quot;importFieldset&quot;);

if(event.originalEvent.target.innerText === &quot;Customization&quot; &amp;&amp; event.collapsed === false){
  //close rest
  exportFieldset.setAttribute(&#39;collapsed&#39;, &quot;true&quot;);
  importFieldset.setAttribute(&#39;collapsed&#39;, &quot;true&quot;);
  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,您可以执行以下操作:

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

    • 为每个 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&lt;Fieldset&gt;;

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) =&gt; {
      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:

&lt;p-fieldset
  legend=&quot;Header&quot;
  #dd
  [collapsed]=&quot;collapsedState[dd.id] ?? false&quot;
  [toggleable]=&quot;true&quot;
  (onAfterToggle)=&quot;collapseOther(dd)&quot;
&gt;

Implementation of collapseOther function:


  collapseOther(toggledField: Fieldset) {
    if (toggledField.collapsed) {
      return;
    }
    //take other not toggled elements
    const otherEls = this.fields.filter((el) =&gt; el.id != toggledField.id);
    
    for (let filedId of Object.keys(this.collapsedState)) {
      const fieldSetCollapsed = otherEls.some((el) =&gt; el.id == filedId)
        ? true
        : false;
      this.collapsedState[filedId] = fieldSetCollapsed;
    }
  }
}

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

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

发表评论

匿名网友

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

确定