Angular：使用 FormArray 在对象数组上嵌套 ngFor

Question

我对嵌套的 ngFor 有疑问，可能是我用错了，在 Home 组件中，我有一个空的对象数组 designInputs:{}[] = []; 我通过在另一个组件中使用 Reactive-form 来填充它，每个表单都作为一个对象存储在此数组中，该表单是使用 FormArray 构建的，因此它不是固定大小的表单然后每个对象有它自己的长度。

在 home 组件中，我正在遍历对象数组 designInputs

<div *ngFor="let form of designInputs;let i = index"> //number of forms
 <h5 class="card-title" *ngFor="let input of form ;let j =index" > {{input [i]}}</h5> //number of inputs in each form
</div>

第一个循环应该负责多少个对象（表单填充），所以要得到整个表单对象第二个循环是获取从每个表单保存的输入值[每个表单（对象）都有不同数量的输入。

编辑： 在另一个组件中，我在名为“designForm”的表单中有一个名为“newFiles”的 formArray，然后将其转换为对象，我这样做了：

let inputsValues = {...this.designForm.get('newFiles').value};

之后，我将它传递给服务，然后传递给主组件，因此 designInputs 例如应该看起来像这样：

[
{0:"input1Value",
 1:"input2Value"
},
{0:"input1Value",
 1:"input2Value",
 2:"input3Value"
}
]

所以我无法预先初始化它，因为目前我不知道每个对象将包含多少项。

这里有什么问题以及如何解决？

Answer 1

如果您在编辑中所说的是这种情况，那么您的 HTML 应该看起来像这样：

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of form" >{{input}}</h5>
</div>

它可能不起作用，我的假设是因为数组只是键为数字的对象，所以它仍然应该迭代。但是，如果迭代不起作用，请像这样尝试：

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of Object.values(form)" >{{input}}</h5>
</div>

编辑

根据您的解决方案：

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of form | keyvalues" >{{input.value}}</h5>
</div>

Answer 2

我找到了我正在寻找的解决方案，使用名为“|keyvalue”的内置管道

<div *ngFor="let form of designInputs;let d = index">
    <h5 class="card-title" *ngFor="let input of form | keyvalue">{{input.value}}</h5>
</div>

Angular：使用 FormArray 在对象数组上嵌套 ngFor

Angular: Nested ngFor on array of objects with FormArray

angular

nested-loops

angular-reactive-forms

ngfor

formarray