Angular 动态材质复选框

我有一系列具有以下结构的服务：

• 附加选项[]

• hasAddons

• serviceId

addonOptions[]

具有以下结构的对象

• serviceId

• addonName

• addonId

• isChecked

我在服务中循环，并在

serviceId

s匹配的位置生成动态复选框。现在，如果

isChecked

为true，我想默认选中复选框。但以下措施不起作用：

插件

{{addon.addonName}

您是否可以尝试使用：

<md-checkbox 
  formControlName="addonName" 
  type="checkbox" 
  [checked]="addon && addon.isChecked" 
  (change)="selectServiceAddon($event.checked,addon)">
  {{addon.addonName}}
</md-checkbox>

{{addon.addonName}

您无法用单个formcontrol捕获单个值，您需要的是一个formArray，我们在其中推送选中的项。下面是一个简化的示例，您正在迭代的数据如下所示：

addonOptions=[{addonName:“name1”，isChecked:false}，
{addonName:“name2”，已选中：true}，
{...}]

构建表单时，只需声明一个空表单数组：

this.myForm=this.fb.group({
插件：this.fb.array（[]）
});

然后，如果在提交表单之前我们实际上不需要关心这些值，那么我们可以在提交表单之后为表单设置这些值

因此，在模板中，我们只需迭代您拥有的数组，如下所示：

{{addon.addonName}

并且不要添加任何表单控件

提交后，我们将已检查的值过滤为true，并将过滤后的数组应用为formArray，如下所示：

onSubmit（）{
设formArr=this.addonOptions.filter（x=>x.isChecked==true）
this.myForm.setControl（'addons'，this.fb.array（[…formArr]）；
}

---

如果您愿意，您还可以在选中/取消选中时动态添加/删除字段，然后执行以下操作：

您会尝试创建一个plunker吗？这是一个反应式表单吗？如果是这样，您的第一个问题是无法用一个formcontrol捕获多个值。是的，这是被动形式，问题是相同的！！在这种情况下，你能提供一些帮助吗？答案如何？一些答案解决了你的问题吗？：）