如何在Angular中附加具有动态数量复选框的ngModel？

【问题标题】：How to attach ngModel with dynamic number of checkboxes in Angular?如何在Angular中附加具有动态数量复选框的ngModel？
【发布时间】：2017-12-21 21:21:46
【问题描述】：

我有一个包含动态数量的复选框的列表，每个都有 id 属性。

<li *ngFor='let i of someArray'>
<input type="checkbox" id={{i}}>
</li>

如果 [(ngModel)] 以前知道每个输入复选框，我可以将它们分配给这些变量。

但是如何在保留双向绑定概念的同时附加动态数量的复选框。

我正在使用@angular/core 2.4.10。

【问题讨论】：

标签： angular checkbox

【解决方案1】：

您必须为此使用FormArray。

import {FormGroup} from '@angular/forms';

constructor(private fb: FormBuilder) {}

public form: FormGroup = this.fb.group({
  checkboxes: this.fb.array([])
});

然后你可以从控件循环：

<li *ngFor='let control of form.checkboxes.controls; let i = index'>
  <input type="checkbox" id={{i}} [formControl]="control">
</li>

然后你可以通过this.form.get('checkboxes').value获取值。

【讨论】：

我做了一个编辑来使它工作。

@techcomp 您只需获取表单控件并调用control.setValue(false)，其中control 是一个保存控件的变量。

【解决方案2】：

与@Chrillewoodz 所说的不同，您不必强制使用表单数组，尽管我建议您使用它。否则你可以这样做

<li *ngFor='let box of someArray; let i = index'>
    <input type="checkbox" [id]="box" [(ngModel)]="someArray[i]">
</li>

【讨论】：

有没有办法不通过索引访问它？
不，它会抛出一个错误，因为 Angular 试图访问动态创建的变量。如果不想使用 formArray，则需要使用索引。

【解决方案3】：

FormArray 可以在您不知道将存在多少控件或表单中有动态元素时使用。

FormArray 在这个stackoverflow answer中有很好的解释

【讨论】：