Angular 角度2-带复选框的格式阵列

我有一个动态大小的项目。我想为每个项目生成一个复选框。 我认为最好的方法是使用FormArray

但是我不能设置任何附加属性来指定动态复选框的标签

items: Array<string> = ['Banana', 'Apple', 'Beer', 'Water'];

let checkboxArray = new FormArray([]);

this.items.forEach(item => {
  let formControl = new FormControl(true);
  checkboxArray.push(formControl);
})

items:Array=[‘香蕉’、‘苹果’、‘啤酒’、‘水’]；
设checkboxArray=newformarray（[]）；
this.items.forEach（item=>{
设formControl=newformcontrol（true）；
checkboxArray.push（formControl）；
})

但正如我们在这里看到的，我只能在formControl中指定复选框的值，但无法设置有关标签的任何其他信息

这里有一个工作组：

使用普通表单组

形式：FormGroup；
项目：字符串[]=['香蕉'、'苹果'、'啤酒'、'水']；
this.form=new FormGroup({
复选框：新表单组（{}），
});
this.items.forEach（item=>{
this.form.controls['checkbox'].addControl（item，newformcontrol（true））；
});

循环

项目

而不是FormArray

{{item}}

---

Plnkr:

这是使用formArray创建动态复选框并根据复选框选择更新formArray的另一种方法。为此，每个动态列表都有一个额外的选定属性

component.html

<div *ngFor="let item of formArray.controls;" [formGroup]="item">
    <mat-checkbox [formControl]="item.get('selected')">
          {{item.get("name")?.value}}
    </mat-checkbox>
</div>

---

啊，太好了。非常感谢你！

"items": [
{
  "name": "Banana",
  "selected": true
},
{
  "name": "Apple",
  "selected": false
}]