我有两个清单,调味品和果汁。
flavors = ['Apple', 'Orange', 'Banana', 'Cherry'];
juice = [];
我正在使用复选框来调用一种更新我的果汁列表中的风味的方法。
<mat-slide-toggle (change)="updateJuice(flavor)">Add</mat-slide-toggle>
我包括一个图标,用于从果汁列表中删除使用相同方法的风味。
<i class="fas fa-backspace clickable" (click)="updateJuice(flavor)"></i>
我不确定当有人将其从果汁中移除时,如何最好地管理静态风味列表中的复选框状态。谁能给我一些建议/例子?
我希望能够使用ngModel来检查口味列表,如下所示:
<mat-slide-toggle (change)="updateJuice(flavor)" [(ngModel)]="juice.indeOf(flavor) > -1">Add</mat-slide-toggle>
但是,编译器不喜欢这种想法。
我制作了一个StackBlitz,它显示了一个有效的示例。
https://stackblitz.com/edit/list-handler?file=src/app/app.component.html
我希望能够做到这一点,以便当有人单击将其从果汁列表中删除的图标时,风味列表中的复选框变为未选中状态。有没有简单的方法可以做到这一点?
在这种情况下,您想使用对象来控制状态。它更容易,您无需使用循环,您可以通过其键立即获得Object值。由于Angular具有keyvalue
管道,因此变得更加容易:
flavors = [
'Apple',
'Orange',
'Banana',
'Cherry'
];
juice = {};
updateJuice(key, event) {
if (event.checked) {
this.juice = {...this.juice, [key]: key }
} else {
delete this.juice[key];
}
}
现在,您还可以将juice
Object绑定到的状态MatSlideToggle
,这样,当从juice
Object中删除项目时,它就会滑落:
Pick flavors for your juice:
<ul>
<li *ngFor="let flavor of flavors">
{{flavor}} <mat-slide-toggle [checked]="!!juice[flavor]" (change)="updateJuice(flavor, $event)">Add</mat-slide-toggle>
</li>
</ul>
Flavors in juice:
<ul>
<li *ngFor="let flavor of juice | keyvalue">
{{flavor.key}} <i class="fas fa-backspace clickable" (click)="updateJuice(flavor.key, $event)"></i>
</li>
</ul>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句