Angular 多角度多维动态阵列

我不熟悉Angular，并尝试在Angular中实现动态/多维阵列。我附上以下代码：

app.component.ts代码：

从'@angular/core'导入{Component，OnInit，Input}；
从“@angular/forms”导入{FormBuilder、FormArray、FormGroup、AbstractControl}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
标题='gmr'；
相位形式：FormGroup；
构造函数（私有_fb:FormBuilder）{
控制台日志（1）；
}
恩戈尼尼特（）{
控制台日志（“在ngonit中”）；
this.phaseForm=this.\u fb.group({
用户名：['']，
阶段执行：本组({
前置：this.\u fb.array（[this.addPhase（）]））
}) 
});
console.log（this.phaseForm）；
}
添加阶段（）{
控制台日志（22）；
将此返回。\u fb.group({
phaseType:['']，
相位值：['']
});
}
获取phaserray（）{
const control=this.phaseForm.get（'phaseExecutions'）['controls'].get（'PRE'）；
控制台日志（“值”+控制）；
返回控制；
}
addMorePhase（）{
this.phaseArray.push（this.addPhase（））；
}
onSubmit（）{
console.log（this.phaseForm.value）；
}
}

下面是app.component.html的代码

应该是

<div class="row" formArrayName="phaseForm.PRE">

您使用的是
formArrayName
而没有父级
formGroupName
。请记住，
PRE
是
phaseExecutions
FormGroup
的一部分。因此，您必须添加一个包装div，上面有
formGroupName=“phaseExecutions”

<form [formGroup]="phaseForm">
    <input formControlName="userName" type="text" class="form-control">
  <div formGroupName="phaseExecutions">
    <h2>Add the phases</h2>    
    PRE Phase:
    <button type="button" class="btn btn-secondary btn-sm" (click)="addMorePhase()">Add Pre-Phase</button>  
    <div class="row" formArrayName="PRE">
      <div class="col-12" *ngFor="let phase of phaseArray.controls; let i=index;" [formGroupName]="i">
        <div>
          <label class="col-sm-3">Phase type:</label>
          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseType">
          <label class="col-sm-3">Phase value:</label>
          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseValue">
        </div>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>


添加阶段
前期：
添加前阶段
相位类型：
相位值：
提交


这里有一个供您参考的答案。
检查我的答案是否有帮助。感谢您的回答，并为我解释清楚。真的很感谢你的帮助。做到了……我不知道该怎么做：）。。。我已经点击了你答案旁边的勾号。。。我还就这一点提出了另一个问题。。如果你有时间的话，请你看看这个问题。我相信你一定能给我一些指点/方向。真是巧合，我实际上正在研究这个问题本身：D。我会尽快更新答案。
<div class="row" formArrayName="phaseForm.PRE">

<form [formGroup]="phaseForm">
    <input formControlName="userName" type="text" class="form-control">
  <div formGroupName="phaseExecutions">
    <h2>Add the phases</h2>    
    PRE Phase:
    <button type="button" class="btn btn-secondary btn-sm" (click)="addMorePhase()">Add Pre-Phase</button>  
    <div class="row" formArrayName="PRE">
      <div class="col-12" *ngFor="let phase of phaseArray.controls; let i=index;" [formGroupName]="i">
        <div>
          <label class="col-sm-3">Phase type:</label>
          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseType">
          <label class="col-sm-3">Phase value:</label>
          <input class="col-sm-3" type="text" class="form-control" formControlName="phaseValue">
        </div>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>