从一组Angular Material复选框中获取值？

Question

我试图弄清楚如何获取一组Angular（7）Material复选框的选定值。

假设我在“flavors”形式上有一个区域，有3个复选框，其值为“chocolate”，“vanilla”和“strawberry”。

<h3>Flavors</h3>
<mat-checkbox value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox value="strawberry">Strawberry</mat-checkbox>

当复选框打开和关闭时，我想更新变量（模型）“flavorsAvailable”。

用mat-radio-groups做这个很简单，因为它只是group元素上的ngModel。但是我如何管理复选框？

注意：我不想使用Angular Material Selection列表;这只是表格。

Answer 1

@Steve，一个物质选择列表，您可以使用[（ngModel）] =“variable”[formControl] =“control”或表单中的formGroupName =“property”。在所有情况下，您都会获得包含所选选项的数组。我不认为有更好的方法来管理复选框。

那么你可以单独使用mat-check，它只使用[（ngModel）]。例如如果你有一系列布尔值。是的，在mat-check-box中没有任何意义[value]，唯一允许的值是：true或false

variable:boolean[]=[]

您可以使用

<mat-checkbox [(ngModel)]="variable[0]" value="chocolate">Chocolate</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[1]" value="vanilla">Vanilla</mat-checkbox>
<mat-checkbox [(ngModel)]="variable[2]" value="strawberry">Strawberry</mat-checkbox>
{{variable|json}}

Answer 2

看看这是否对您有所帮助：

flavorsAvailable: any[] = [
    { 'id': '0', 'name': 'chocolate' },
    { 'id': '1', 'name': 'vanilla' }
];

getCheckeds(ev): any[] {
  return this.flavorsAvailable.filter(x => x.state = ev.target.checked);
}

如果这是您在“我不想使用Angular Material Selection列表时提到的列表类型;这仅适用于表单。”。他们，这没有意义，你需要在3个不同的ngModel中逐个选择......