Angular 如何处理使用*ngFor显示的多个列表项中的切换

我正在尝试为ngFor显示的项目列表实现切换。就像我单击切换按钮时，它应该显示特定于该行的div。 我也必须相应地应用样式。 现在我看到当我点击一个按钮时，所有的行都显示div。这里有什么建议吗

export class VentClass {

    toggelFlagvfe: boolean = false;
    gDatas: any[];

    constructor() {
        this.gDatas = [{"ID":"85","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"},{"ID":"10","CreatedBy":"jmzw"}]},{"ID":"86","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"}]},{"ID":"87","Source":"EC","Eqpmnts":[]}]
    }


     toggleSection(item) {

         if (this.toggelFlagvfe == true) {
             this.toggelFlagvfe = false;
         }
         else {
             this.toggelFlagvfe = true;
         }
     }

}

  <ion-row *ngFor="let item of gDatas">
      <ion-col col-1>
          <button (click)="toggleSection(item)" detail-none
                  [ngClass]="{'section-active1': toggelFlagvfe, 'section1': !toggelFlagvfe}">
              <ion-icon item-left name="arrow-dropright" *ngIf="!toggelFlagvfe"></ion-icon>
              <ion-icon item-left name="arrow-dropdown" *ngIf="toggelFlagvfe"></ion-icon>
          </button>
      </ion-col>
      <ion-col col-2>
          <ion-input type="number" [(ngModel)]="item.ID" text-wrap></ion-input>
      </ion-col>
      <ion-col col-2>
          <ion-label>{{item.Source}} </ion-label>
      </ion-col>

      <div *ngIf="toggelFlagvfe">
          <ion-grid >
              <ion-row *ngFor="let eqpm of item.Eqpmnts" nowrap>
                  <ion-col>
                      <ion-label>{{eqpm.ID}} </ion-label>
                      <ion-label>{{eqpm.CreatedBy}} </ion-label>
                  </ion-col>
              </ion-row>
          </ion-grid>
      </div>
  </ion-row>

---

您正在使用单个布尔值来控制gDatas中所有元素的切换。因此，无论何时将toggelFlagve设置为true，模板中的*ngIf对于*ngFor循环的所有成员都将计算为true

相反，您可以为gDatas的每个成员设置一个切换布尔键，当您单击按钮元素时，该键将更改为true：

//your component template
<ion-row *ngFor="let item of gDatas; index as i">
    <ion-col col-1>
         <button (click)="toggleSection(i)" detail-none
                 [ngClass]="{'section-active1': item.toggle, 'section1': !item.toggle}">
             <ion-icon item-left name="arrow-dropright" *ngIf="!item.toggle"></ion-icon>
             <ion-icon item-left name="arrow-dropdown" *ngIf="item.toggle"></ion-icon>
         </button>
    </ion-col>
    <!-- other stuff is the same -->
    <div *ngIf="item.toggle">
        <!-- contents are the same here -->
    </div>
</ion-row>

//your component.ts
export class VentClass {

    gDatas: any[];

    constructor() {
        this.gDatas = [{toggle: false,"ID":"85","Source":"Local","Eqpmnts":[{"ID":"10","CreatedBy":"jmzw"},{"ID":"10","CreatedBy":"jmzw"}]},{toggle: false,"ID":"86","Source":"Local","Eqpmnts":[{toggle: false,"ID":"10","CreatedBy":"jmzw"}]},{toggle: false,"ID":"87","Source":"EC","Eqpmnts":[]}]
    }

    toggleSection(item: number) {
        this.gDatas[item].toggle = !this.gDatas[item].toggle;
    }
}

所以这里最大的区别是toggleSection现在在gDatas中获取数组索引来确定需要切换的元素，然后使用item.toggle来确定是否切换每个元素，而不是在HTML模板中使用ToggleFlagVFE