Question

我有div使用* ngFor重复。因此，我的网页上有多个div。在这些div中的每一个中，还有几个元素也可以切换。所以我们有collapsible fields within other collapsible fields。每个项目允许父项折叠所有子项，但子项也可以单独展开/折叠。

问题是，当使用* ngFor生成多个项目时，展开/折叠字段的切换功能将应用于页面上的所有项目。我希望切换仅适用于该特定项目。

以下是HTML / AngularJS代码的片段：

<div padding>
  <div *ngFor="let item of ItemsList">
    <div>
      <ion-grid>
        <ion-row>
          <ion-col>
            {{item.information}}
          </ion-col>
          <ion-col>
            {{item.information}}
          </ion-col>
          <ion-col>
            {{item.information}}
          </ion-col>
          <ion-col>
            {{item.information}}
          </ion-col>
          <ion-col>
            <a *ngIf="!expandItem" (click)="toggleItem('down')">
              <ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
            </a>
            <a *ngIf="expandItem" (click)="toggleItem('up')">
              <ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
            </a>
          </ion-col>
        </ion-row>
      <div>
       ...
       ...
       ...
        <ion-col>
          <a *ngIf="!expandField1" (click)="toggleField1('down')">
            <ion-icon class="fa fa-angle-double-down fa-2x"></ion-icon>
          </a>
          <a *ngIf="expandField1" (click)="toggleField1('up')">
            <ion-icon class="fa fa-angle-double-up fa-2x"></ion-icon>
          </a>
        </ion-col>
           <ion-grid *ngIf ="expandField1 || (expandItem && expandField1)">    
          <ion-row *ngFor="let subItem of item.subItem">
            <ion-col>
              {{subItem.name}}
            </ion-col>
            <ion-col>
             {{subItem.name}}
            </ion-col>
            <ion-col>
              {{subItem.name}}
            </ion-col>
          </ion-row>  
        </ion-grid>
      </div>
 </div>

以下是切换功能的片段

toggleItem(type: any) {
        if (type == 'up') {
            this.expandItem = false;
            this.expandField1 = false;
        } else {
            this.expandItem = true;
            this.expandField1 = true;
        }
toggleField1(type: any) {
        if (type == 'up') {
            this.expandField1 = false;
        } else {
            this.expandField1 = true;
            this.expandItem = true;
    }

有任何问题请问。

Answer 1

您必须使用expandItem和expandField1数组来跟踪每个可折叠的打开和关闭。为此，你可以使用$ index然后为它设置数组，就像expandItem [$ index] = true一样，点击特定的可聚合。

使用切换功能展开/折叠在ngFor中生成的字段？

1 个答案: