Как обрабатывать переключение в нескольких элементах списка, отображаемых с помощью * ngFor - PullRequest
Новая
       22

Как обрабатывать переключение в нескольких элементах списка, отображаемых с помощью * ngFor

0 голосов
/ 09 июля 2019

Я пытаюсь реализовать переключение для списка элементов, отображаемых ngFor.например, когда я нажимаю на кнопку переключения, он должен отображать div, специфичный для этой строки.Также я должен применять стили соответственно.Теперь я вижу, когда я нажимаю на одну кнопку, все строки показывают div.Any рекомендации здесь? 

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>

1 Ответ

1 голос
/ 10 июля 2019

Вы используете единственное логическое значение для управления переключением для всех элементов в gDatas. Поэтому, если для toggelFlagve установлено значение true, *ngIf в вашем шаблоне будет иметь значение true для всех членов цикла *ngFor.

Вместо этого у вас есть логический ключ «toggle» для каждого члена 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, чтобы определить, какой элемент должен быть переключен, а затем вместо использования toggelFlagvfe в шаблоне HTML, который вы используете item.toggle, чтобы определить включен ли каждый отдельный элемент или нет.

...