Question

我想在Angular 4上的formArray上显示数据。在构造函数上，我调用了服务。

  this.LaboratoireListServiceProvider.getLaboratoires().subscribe(
data => {
  this.listLabo = data;
  this.initFormGeneral();
 for (let i = 0; i < data.length; i++) {
  let element=this.formBuilder.group({
    name: [data[i].name,],
    mail: [data[i].mail,],
    checked: [],
  });
  this.Labo.push(element);
 }
 console.log(this.laboFormGeneral.get('laboratoire').value);
}

）;

在另一种方法中，我写了这段代码：

  initFormGeneral() {
    return this.laboFormGeneral = this.formBuilder.group({
      laboratoire: this.formBuilder.array([])
    });
  }

当我放松实验室值时，我会毫无问题地获得写入值。

当我添加html块时，我收到错误"Unable to read the 'properties' of 'undefined'"

<form [formGroup]="laboFormGeneral" novalidate>
  <div formArrayName="laboratoire"> 
    <div *ngFor="let laboratoire of laboFormGeneral.controls.laboratoire.controls; let i=index">

                          <div class="textAlign" [formGroupName]="i">
                            <ion-input type="text" formControlName="name"></ion-input>
                            <ion-input type="text" formControlName="mail"></ion-input>
                          </div>
                        </div>
                    </div>
  </form>

我如何解决这个问题？

Answer 1

您获取数据异步，并且当Angular首次呈现视图时它尚不可用。您可以使用安全导航操作符再次防止此错误：

<div *ngFor="let laboratoire of laboFormGeneral?.controls?.laboratoire?.controls; let i=index">

Answer 2

尝试检查laboFormGeneral.controls.laboratoire.controls中的*ngIf，如果它不是undefined，那么迭代controls：

       <form [formGroup]="laboFormGeneral" novalidate>
          <div *ngIf="laboFormGeneral && laboFormGeneral.controls && laboFormGeneral.controls.laboratoire && laboFormGeneral.controls.laboratoire.controls" formArrayName="laboratoire"> 
            <div *ngFor="let laboratoire of laboFormGeneral.controls.laboratoire.controls; let i=index">
              <div class="textAlign" [formGroupName]="i">
                 <ion-input type="text" formControlName="name"></ion-input>
                 <ion-input type="text" formControlName="mail"></ion-input>
              </div>
             </div>
          </div>
       </form>

无法阅读财产控件＆＃39;未定义的

2 个答案: