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

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>

我不确定当有人从他们的果汁中删除它时，如何最好地管理静态口味列表中复选框的状态。谁能给我一些advice/examples?

我希望我能够使用 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

在这种情况下，您想使用对象来控制状态。它更容易，你不需要使用循环，你可以通过它的键立即获得对象值。因为 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 中管理复选框状态的正确方法是什么？

What's the proper way to manage checkbox state in Angular 8?

angular

angular-material

angular-state-managmement