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

Posted 2023-03-13

【中文标题】如何处理角度 6 中的多个 mat-slide-toggle 标签？

【英文标题】：How to handle multiple mat-slide-toggle label in angular 6?

【发布时间】：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中看到真假

【参考方案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';