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

【问题标题】：Get values from a group of Angular Material checkboxes?从一组 Angular Material 复选框中获取值？
【发布时间】：2019-08-30 01:43:05
【问题描述】：

我正在尝试弄清楚如何获取一组 Angular (7) Material 复选框的选定值。

假设我在“口味”表单上有一个区域和 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。但是如何管理复选框？

注意：我不想使用 Angular 材质选择列表；这仅适用于表单。

【问题讨论】：

flavorsAvailable 是什么类型？当您选中和取消选中复选框时，模型会发生什么情况？

标签： javascript angular checkbox angular-material2

【解决方案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}}

【讨论】：

有道理，虽然有点奇怪。另外，我使用了variable = []。谢谢。

【解决方案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 材质选择列表；这只是用于表单。”中提到的列表类型。他们，这没有意义，你需要在 3 个不同的 ngModel 中一一挑选......

【讨论】：