带有 *ngIf 的 Mat-select 导致 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个 mat-form-field，我想包含一个输入或一个 select。

当我使用 < input > 时，*ngIf 工作正常。但是，当我像下面那样使用 < mat-select > 时，它会抛出 'ExpressionChangedAfterItHasBeenCheckedError'.

我认为这只是在我将 angular 版本更新为：

之后才开始发生的

Angular CLI：8.2.1 节点：10.16.2 Angular: 9.0.0-next.1

为什么它应该使用输入而不是 select？

这是 html：

<mat-form-field>
  <input *ngIf="input.name!=='Bid'" matInput [(ngModel)]="input.value">
  <mat-select *ngIf="input.name==='Bid'" [(value)]="input.value">
    <mat-option *ngFor="let s of statuses" name="status" [value]="s">{{s}}</mat-option>
  </mat-select>
  <mat-placeholder class="placeholder">{{input.name}}</mat-placeholder>
</mat-form-field>

input.name 属性在 ngOnInit() 中调用的方法中设置，如下所示：

ngOnInit() {
  this.prepareInputs();
}

Answer 1

这是由 <mat-placeholder> 行引起的，该行没有应用 *ngIf，因此当未选择输入时，<mat-placeholder> 导致卡住向上！当我把 *ngIf 放在 <mat-placeholder> 上时，问题就消失了。

<mat-form-field>
  <input *ngIf="input.name!=='Bid'" matInput [(ngModel)]="input.value">
  <mat-placeholder *ngIf="input.name!=='Bid'" class="placeholder">{{input.name}}</mat-placeholder>
  <mat-select *ngIf="input.name==='Bid'" [(value)]="input.value">
    <mat-option *ngFor="let s of statuses" name="status" [value]="s">{{s}}</mat-option>
  </mat-select>
</mat-form-field>

带有 *ngIf 的 Mat-select 导致 ExpressionChangedAfterItHasBeenCheckedError

Mat-select with *ngIf causing ExpressionChangedAfterItHasBeenCheckedError

angular-material2

angular