试图用 *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>

可以看到文件本身here。

Non-working plunker

Answer 1

通过切换到 FormGroup，我能够让你的 Plunker 工作。您可以在此处查看该解决方案：https://plnkr.co/edit/AYeTzb2La6tBY4AqXXyx?p=preview

这至少让你更近了一步......希望你能够通过添加 FormArray 来增强它。

    <div formGroupName="experiences">
      <div *ngFor="let exp of expArray | keys">
          <input [formControlName]="exp" placeholder="Experience">
        </div>
    </div>

Answer 2

为了继续 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

试图用 *ngFor 显示一个嵌套的 FormGroup，不知道如何访问它

trying to display a nested FormGroup with *ngFor, not sure how to access it

angular2-forms

angular