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

Question

我试图弄清楚如何获取一组“角度（7）材质”复选框的选定值。假设我在“风味”表格上有一个区域，并带有3个复选框，其值分别为“巧克力”，“香草”和“草莓”。<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。但是如何管理复选框？注意：我不想使用“角度材料选择”列表；这仅用于表格。

Answer 1

您可以使用[（ngModel）] =“变量” [formControl] =“控制”或以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);

}

如果这是您在“我不想使用“角度材料选择”列表；这仅用于表单”上提到的列表类型。他们，这没有道理，您需要一一选择3个不同的ngModels ...