Angular 6: ExpressionChangedAfterItHasBeenCheckedError 由 select 下拉事件触发

Question

What code changes can remedy the Error described below ?

用例

下拉输入 UI 受到保护，不会通过模式意外更改所选值。但是，连接到下拉列表的事件（单击、焦点或其他）会导致 ExpressionChangedAfterItHasBeenCheckedError，在 Chrome 开发模式的控制台中观察到。

观测结果

单击下拉菜单时，抛出 ExpressionChangedAfterItHasBeenCheckedError（请参阅控制台）

预期结果

单击下拉菜单时，模式打开时没有错误

演示

A link 在 stackblitz

中演示

备注

如 "Everything you need to know about ExpressionChangedAfterItHasBeenCheckedError" here 中所述，我尝试触发更改检测（见app.component.ts:48-49里面的注释，标记为 STEP-1 和 STEP-2)，但没有成功（可能触发的地方不对？）
演示中的模式没有完全实现 [OK] 和 [CANCEL]，因为它不影响错误
该代码是大型应用程序的简化版本

Answer 1

What code changes can remedy the Error described below ?

像这样的代码应该可以帮到你：

<select 
  [(ngModel)]="building.venueId"
  #ngModel="ngModel"
  ^^^^^^^^^^^^^^^^^^
  get hold of NgModel instance
  ...
  (click)="ngModel.control.markAsTouched(); confirmChangeItem(building.venueId)">
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
           and prepare FormControl to the changes

Forked Stackblitz

更新

我忘了说在这种情况下你可以删除 cdRef.detectChanges 和微任务所以我很高兴知道你自己猜到了

Angular 6: ExpressionChangedAfterItHasBeenCheckedError 由 select 下拉事件触发

Angular 6: ExpressionChangedAfterItHasBeenCheckedError triggered from select drop-down event

javascript

typescript

angular-bootstrap

angular