Question

我使用的是角度6，我有4张Mat卡，每张卡的状态值为有效或无效。每个卡都有一个可改变其状态的防滑垫。当幻灯片切换方式从 true 变为 false 时，我想将有效状态更改为无效。这是代码：

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中看到对与错

Answer 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';
}

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

1 个答案: