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};

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

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

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

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

Answer 1

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

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

Answer 2

如果您在编辑中所说的是这种情况，那么您的 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>