Question

我有一个包含ID列表的模型。我有一组复选框，其值为id。我想将它们直接绑定在一起，但是我要做的就是手动挂钩[checked]和(change)属性，这似乎比我应该做的工作还要多。（也就是说，模型和组件之间的底层接口非常基本，以至于似乎应该已经开箱即用地支持它。）

模型：

export class Product {
  id: number;
  name: string;
}
export class MyModel {
  products: number[];
  // plus other unrelated stuff of course
}

然后在我的组件中，我有一系列复选框（我正在使用mat-checkbox，但这没关系），其中显示值是产品名称，而值是id。

<mat-checkbox *ngFor="let product of products"
              [value]="product.id">{{product.name}}</mat-checkbox>

我想做的是用选定的复选框值的集合填充模型中的产品数组。例如，如果检查产品1,3,5，则模型的产品数组将为[1,3,5]。

我知道，如果我将[checked]绑定到一个看模型数组是否包含id的函数，并将(change)事件绑定到一个将值推到数组。例如：

<mat-checkbox *ngFor="let product of products"
  [value]="product.id"
  (change)="$event.checked ? model.products.push(product.id) : model.products.splice(model.products.indexOf(product.id),1)"
  [checked]="model.products.includes(product.id)">{{product.name}}</mat-checkbox>

但是，这很讨厌，尤其是更改事件。是否可以将组件直接直接绑定到ngModel本身？我可能不知道某些语法？

将复选框直接绑定到ngModel的ID列表

0 个答案: