我创建了一个ReactiveForm,它在创建新记录时非常有效 . 但是当我尝试编辑它时,我对数组有一些问题,主要是在选择版本中 .

HTML:

<div formArrayName="racNaturezas">
  <div *ngFor="let itemrow of formulario.controls.racNaturezas.controls; let i=index"  [formGroupName]="i">
    <div formGroupName="natureza">
      <div class="input-field col s10 m10 l10">
              <select materialize="material_select" [materializeSelectOptions]="naturezas" formControlName="idNatureza">
                <option value=""  disabled selected>Escolha a Natureza</option>
                <option *ngFor="let nat of naturezas" value={{nat.idNatureza}}>{{nat.descricao}}</option>
              </select>
              <label>Natureza</label>
      </div>
    </div>
    <div class="input-field col s1 m1 l1">
      <a *ngIf="formulario.controls.racNaturezas.controls.length > 1" class="btn-floating btn-medium waves-effect waves-light red" (click)="deleteRow(i)"><i class="material-icons">remove</i></a>                     
    </div>                     
  </div>
    <div class="input-field col s1 m1 l1">
        <a class="btn-floating btn-medium waves-effect waves-light blue" (click)="addNewRow()"><i class="material-icons">add</i></a>
    </div>
</div>

TS文件

this.formulario = this.formBuilder.group({
      racNaturezas:  this.formBuilder.array([this.iniciaArrayNaturezas()])
    });


  iniciaArrayNaturezas() {   
      return this.formBuilder.group({
        natureza: this.formBuilder.group({
          idNatureza:[null]
        }),
        principal:[false]
      })
  }

  addNewRow() {
    const control = <FormArray>this.formulario.controls['racNaturezas'];
    control.push(this.iniciaArrayNaturezas());
}

deleteRow(index: number) {
    const control = <FormArray>this.formulario.controls['racNaturezas'];
    control.removeAt(index);
}

好吧,使用上面这些代码,我可以选择并添加多个itens并保存,但是当我尝试编辑一个时,select不显示值 . 我正在尝试使用相同的HTML和TS文件 . 为此,当用户尝试编辑它时,我创建了一个不同的方法:

carregaRac() {
    this.racService.buscarPorCodigo(this.idRac)
    .then(rac => {
      this.rac = rac;
      this.formulario.patchValue({this.formulario.setControl('racNaturezas', this.formBuilder.array(this.rac.racNaturezas || []));
})
.catch(erro => this.errorHandler.handle(erro));  }

在这种情况下,我在我的视图中使用调试,我看到数组正在表单控件中正确加载,但没有出现在我的视图中:

Options is not selected

查看调试,数组“racNaturezas”已正确加载,但我不知道为什么,在select选项中没有绑定:

"racNaturezas": [
    {
      "natureza": {
        "idNatureza": "2"
      },
      "principal": true
    },
    {
      "natureza": {
        "idNatureza": "3"
      },
      "principal": false
    }
  ]