angular - 尝试使用 *ngFor 显示嵌套的 FormGroup，不知道如何访问它

Question

我有一个 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 .

Non-working plunker

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` 进行迭代。

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>

STACKBLITZ