1

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

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

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

4

1 回答 1

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

现在您还可以将juiceObject 绑定到 的状态，因此当从ObjectMatSlideToggle中删除项目时它会滑落：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>

分叉演示

于 2019-11-07T18:18:44.043 回答