Angular2：ControlArray

Question

我很难弄清楚如何迭代模板中包含ControlArray的{​​{1}}。在TypeScript中，到目前为止，我创建了Controlgroup，并通过迭代从远程服务接收的数据，我向数组添加了一些ControlArray。到目前为止一切都很好，我可以在控制台中看到预期的数据结构。

在模板中，我有这个：

ControlGroup

...其中<div *ngFor="#c of categories.controls"> <div ngControlGroup="c"> </div> </div> 是ControlArray（在categories属性中包含ControlGroup的数组）。当我遗漏内部controls时，我没有收到错误，这表明Angular同意我<div>确实是一个数组。但是一旦我重新添加内部categories.controls（我希望局部变量<div>成为数组中的一个对象），我就会收到一条消息“找不到控件”的异常c '在[c in]中。此外，我尝试了各种其他语法方法，但没有一个工作。除了“无法找到控制......”方法之外，我还得到了“找不到不同的支持对象......”，但这并没有让我更进一步。

关于我做错了什么的提示？

Answer 1

一个错误是

ngControlGroup="c"

没有任何约束力。它将文字c传递给ngControlGroup。它应该是：

[ngControlGroup]="c"

此修复后仍然产生的错误似乎是因为没有控件。

Answer 2

通过更改

解决了错误

ngControlGroup="c"

进入

attr.ngControlGroup="c"

因为通过将c分配给ngControlGroup，您只需分配值而不是任何绑定。但奇怪的是为什么[ngControlGroup]仍然会产生一些错误。这里的这些是真实的例子 https://plnkr.co/edit/Yw21a1aSivNg4G6gYkhF?p=preview

Answer 3

ngControlGroup正在定义一个新的控制组。如果我正确理解您的问题，您实际上想要在控件数组内的控件组内编辑项目。看看这个plnkr：https://plnkr.co/edit/3gM2TuMGBW13HNATUcCO

<div *ngFor="#c of categories.controls; #i = index">
      Control group {{i}}:
    <div>
        <input type="text" class="form-control m-b" [ngFormControl]="c.controls.title"/>
        <input type="text" class="form-control m-b" [ngFormControl]="c.controls.id"/>
      </div>  
    </div>