试图显示带有* ngFor的嵌套FormGroup，不确定如何访问它

Question

我有一个FormGroups的FormArray。眼下FormArray，experiences具有一个目的，含有3所控制，一个FormGroup companyName，jobDescription，和yearsWorked。问题是，当我console.log 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>

文件本身可以在这里看到。

不工作的矮人

Answer 1

为了继续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`进行迭代。

更新：由于已经提出了这个问题并回答了问题，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>

叠砖