Question

我有两个清单，调味品和果汁。

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

我希望能够做到这一点，以便当有人单击将其从果汁列表中删除的图标时，不会选中口味列表中的复选框。有没有简单的方法可以做到这一点？

Answer 1

在这种情况下，您想使用对象来控制状态。它更容易，并且您无需使用循环，您可以通过其键立即获得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对象绑定到MatSlideToggle的状态，以便在从juice对象中删除项目时将其滑落：

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>

Forked demo

在Angular 8中管理复选框状态的正确方法是什么？

1 个答案: