从一组 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 执行此操作很简单，因为它只是组元素上的一个 ngModel。但是如何管理复选框？

注意：我不想使用 Angular Material 选择列表；这只是表格。

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

如果这是您在“我不想使用 Angular Material 选择列表；这仅用于表单。 中提到的列表类型”。他们，这没有意义，你需要在 3 个不同的 ngModels 中一个一个地挑选...

Answer 2

@Steve，一个 material 选择列表，您可以使用 [(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}}

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

Get values from a group of Angular Material checkboxes?

javascript

angular

checkbox

angular-material2