如何处理角度 6 中的多个垫子滑动切换标签?

Question

我使用的是角度 6，我有 4 张垫卡，每张卡的状态值为活动或非活动。 每张卡都有一个垫子滑动切换开关，用于更改卡的状态。 我想在滑动切换从true更改为false时将活动状态更改为"非活动"。以下是代码：

卡.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>

卡.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)
}

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

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