我有一个 FormGroup 的 FormArray。现在 FormArray experiences
有一个对象,一个 FormGroup 包含 3 个控件,companyName
、jobDescription
和 yearsWorked
。问题是,当我控制台记录 FormArray 对象时,我看到数据对象的工作方式如下:FormArray.controls.FormGroup.controls。我不知道在此处如何调用 FormGroup,以便我可以访问它。所以html会是这样的:
<div *ngFor="let exp of experiences.controls.[what do I call this?].controls">
<input [formControlName]="n" placeholder="Experience">
</div>
文件本身可见here .
最佳答案
要继续 DeborahK 的回答,以便我们能够实现您想要的解决方案,即将 experience
作为 formArray,让我们执行以下操作,同时查看您的代码。第一个错误在这里:
<div *ngFor="let exp of experiences.controls.FormGroup.controls">
迭代错了,应该是:
<div *ngFor="let exp of experiences.controls; let n=index">
我们在这里需要索引,因为你在这个数组中有表单组,所以每个都用索引命名。
<删除> 然后就像 DeborahK 建议的那样,我们需要一个管道,因为您的 `expArray` 是一个对象,并且不能在不使用管道的情况下使用 `*ngFor` 进行迭代。UPDATE:由于这个问题已经问过并写过答案,Angular 提供了 keyvalue
管道,所以不需要创建自定义管道:
<div formArrayName="experiences">
<div *ngFor="let exp of experiences.controls; let n=index">
<div [formGroupName]="n">
<div *ngFor="let e of expArray | keyvalue">
<input [formControlName]="e.key" placeholder="Experience">
</div>
</div>
</div>
</div>
关于angular - 尝试使用 *ngFor 显示嵌套的 FormGroup,不知道如何访问它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43598563/