Angular 4 表单加载数据服务抛出 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Angular 4 Load Data Service for Form throws ExpressionChangedAfterItHasBeenCheckedErrorAngular 4 表单加载数据服务抛出 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2018-04-17 04:48:03
【问题描述】：

我正在通过 REST-API 获取数据。在这些数据的帮助下，我为表单生成单选按钮。只要表单无效，提交按钮就会被禁用。由于检索数据需要一些时间，因此表单的有效性会发生变化。这会引发ExpressionChangedAfterItHasBeenCheckedError。我该如何解决这个问题？这会儿我有点迷茫。

表格：

  <form #Form="ngForm" [formGroup]="formGroup">
    <div formArrayName="formArray">
      <div *ngFor="let temp of data,let i=index">
        <label [for]="i">
          <input [name]="i" type="radio" [formControlName]="i" [(ngModel)]="selection" [value]="temp"/>
          {{temp.name}}
        </label>
      </div>
    </div>
    <buttontype="button" (click)="goToPrevious(Form)">Back</button>
    <button mat-raised-button type="button" [disabled]="!formGroup.valid"
            (click)="goToNext(Form)">Next
    </button>
  </form>

组件：

 this.formGroup = new FormGroup({
      formArray:  this.formArray = new FormArray([])
    });

    this.commonService.getData().subscribe(data => {
        this.data= data;
        this.createForm();
      }
    );

 createForm() {
    for (let i = 0; i < this.data.length; i++) {
      this.formArray.push(new FormControl('', [Validators.required]))
    }
  }

【问题讨论】：

1.什么时候显示错误？ 2. ', let' 在 ngFor 中应该是 "; let ..."
谢谢。 formGroup.valid 在我推送到 formArray 之前是 true。推送后formGroup.valid 是false。错误显示在表单出现后。有没有办法调试模板？
错误来自角材料2mat-raised-button。如果我使用普通按钮尝试此操作，则不会发生错误。
我仍在寻找错误。 NgFor 和 formArray.push(...) 正在工作，但是 Button 的属性禁用将不会再次验证，因此异常仍然存在。无论如何，我从你的例子中知道它有效，所以我必须在别处寻找错误。谢谢你的帮助。我一发现错误就会通知你。
好的。我会试试看。有没有像“为用户投票”之类的东西？我要感谢您的帮助。

标签： forms angular angular4-forms

【解决方案1】：

只有在使用布尔标志获取所有数据时才能显示视图，它应该防止错误，如下所示：

<form #Form="ngForm" [formGroup]="formGroup" *ngIf="readyToShow">

在组件中：

readyToShow = false;

createForm() {
   for (let i = 0; i < this.data.length; i++) {
       this.formArray.push(new FormControl('', [Validators.required]))
   }
   this.readyToShow = true;
}

【讨论】：