Angular 6：从选择下拉事件触发的ExpressionChangedAfterItHasBeenCheckedError

Question

哪些代码更改可以解决下面描述的错误？

用例

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

观察结果

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

预期结果

单击下拉列表时，将打开模态而不会出现错误

演示

stackblitz中的演示链接

笔记

• 如“所有你需要知道ExpressionChangedAfterItHasBeenCheckedError” 在这里 ，我试图触发变化检测（见注释里面app.component.ts：48-49，标示为STEP-1和STEP-2），但没有成功（可能是触发不是在正确的地方？）
• 演示中的模态未完全实现[OK]和[CANCEL]，因为它不会影响错误
• 该代码是较大的应用程序的简化版本

Answer 1

哪些代码更改可以解决下面描述的错误？

像这样的代码可以帮助你：

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

分叉Stackblitz

更新

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