如何在ngFor（嵌套formArray）中的ngFor中同步formControlName？

Question

如何在ngFor（嵌套formArray）中的ngFor中同步formControlName？ 我正在尝试创建一个动态表单，在获取更新的表单数组时面临问题。但我无法访问formControlName中的值，尝试下面的代码，但它没有用。

有人可以帮我解决我在下面的代码中出错的地方

HTML代码：

<form [formGroup]="ratioFormSrray"  (ngSubmit)="saveRecord(ratioFormSrray.value)">
<div class="container" *ngFor="let col of ratios; let i = index;" [formGroupName]="i" >
<div><h3>{{col.name}}</h3></div>
<div  *ngFor="let data of col.formulas" class="row" formGroupName="formulas">
<div class="col-lg-2">
    <input type="checkbox" name="data.name" value="data.checked" formControlName="checked">
</div>

<div class="col-lg-4">
        <p>{{data.name}}</p>
</div>

<div class="col-lg-2" formGroupName="operators">
    <select formControlName="display">
        <option *ngFor="let operator of data.operators;let j = index;" [formGroupName]="j" value="operator.value" >{{operator.display}}</option>
    </select>
</div>

<div class="col-lg-4">
<input type="text" formControlName="benchMarkValue" name="{{data.benchMarkValue}}" value="{{data.benchMarkValue}}" >
</div>
</div>
</div>
<button class="btn btn-primary">
    save
</button>
</form> 

TS代码：

     export class ratiosComponent implements OnInit {
       ratioFormSrray: FormGroup;
      formulas:string;
      operators:string;
      ratios= [
        {
            "name": "Leverage Ratios",
            "id": 3,
            "formulas": [
                {
                    "name": "Debt to Equity",
                    "active": true,
                    "expression": "Total Debt / Total Equity",
                    "checked": false,
                    "operators": [
                        {
                            "display": "=",
                            "value": "=",
                            "active": true,
                            "selected": false
                        },
                        {
                            "display": ">",
                            "value": ">",
                            "active": true,
                            "selected": false
                        }
                    ],
                    "benchMarkValue": 0
                },
                {
                    "name": "Debt to Assets",
                    "active": true,
                    "expression": "Total Debt / Total Assets",
                    "checked": false,
                    "operators": [
                        {
                            "display": "=",
                            "value": "=",
                            "active": true,
                            "selected": false
                        }
                    ],
                    "benchMarkValue": 0
                },
            ],
            "checked": false
        }
    ];
    constructor( private formBuilder: FormBuilder) { }
    ngOnInit(){
    this.ratioFormSrray = this.formBuilder.group({
          formulas: this.formBuilder.array([
                 this.formBuilder.group({
                   name:new formControl(),
                     active:new formControl(),
                       expression:new formControl(),
                         checked:new formControl(),
                        operators: this.formBuilder.array([
                            this.formBuilder.group({
                                  display: new FormControl(),
                                  value: new FormControl(),
                                  active: new FormControl(),
                                  selected: new FormControl()
                            })
                        ]),
                        benchMarkValue:new formControl()
                    }),
                    checked:new formControl(),
                ])
             });
             }

saveRecord(model: any){
  console.log("model",model)
  }
}