如何处理角度 6 中的多个 mat-slide-toggle 标签？答案

【问题标题】：How to handle multiple mat-slide-toggle label in angular 6?如何处理角度 6 中的多个 mat-slide-toggle 标签？
【发布时间】：2019-01-27 05:45:19
【问题描述】：

我正在使用 Angular 6，我有 4 张垫卡，每张卡的状态为 Active 或 Deactive。每张卡片都有一个垫子滑动开关，可以改变卡片的状态。当滑动切换从 true 变为 false 时，我想将 Active 状态更改为 Deactive。以下是代码：

card.html

<mat-grid-tile *ngFor="let card of cards">
        <mat-slide-toggle class="example-margin" (change)="onChange($event)" [disabled]="false" [checked]="true"  [(ngModel)]="card.status1" name="status">
          <span class="status">status: {{card.status}}</span>
        </mat-slide-toggle>
</mat-grid-tile>

card.ts

 ngOnInit() {
this.getDispensers();
}

    getDispensers() {
    this.dispenserService.getDispensers().subscribe(dispensers => {
      this.cards = dispensers;
      this.cards.forEach(item => {
        item.status1 = item.status == 'Deactive' ? false : true;
      });
    });
  }


 onChange(value) {
    console.log(value)
  }

我不知道我应该如何更改状态。现在我只在card.status中看到真假

【问题讨论】：

标签： typescript angular-material onchange angular6 slidetoggle

【解决方案1】：

由于您的卡片模型数据与滑动切换模型数据不同，您无法使用[(ngModel)]="card.status1" 直接将切换绑定到卡片。而是使用切换开关的[checked] 和(change) 自己手动进行绑定：

<mat-grid-tile *ngFor="let card of cards">
    <mat-slide-toggle class="example-margin" (change)="onChange($event.checked, card)" [disabled]="false" [checked]="card.status === 'Active'" name="status">
        <span class="status">status: {{card.status}}</span>
    </mat-slide-toggle>
</mat-grid-tile>

ngOnInit() {
    this.getDispensers();
}

getDispensers() {
    this.dispenserService.getDispensers().subscribe(dispensers => {
        this.cards = dispensers;
    });
}


onChange(value, card) {
    card.status = value ? 'Active' : 'Deactive';
}

【讨论】：