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

看看这是否对您有帮助：

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

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

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

Answer 2

@Steve，您可以使用[（ngModel）] =“变量” [formControl] =“控制”或以formGroupName =“ property”的形式使用的材料选择列表。在所有情况下，您都将获得具有所选选项的阵列。我没有想到更好的方法来管理复选框。

好吧，您可以单独使用mat-check，仅使用[（ngModel）]。例如如果您有一个布尔数组。是的，在mat-check框中没有意义[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}}

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

2 个答案: