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

Question

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

用例

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

观察结果

单击下拉菜单时，会引发ExpressionChangedAfterItHasBeenCheckedError （请参阅控制台）

预期结果

单击下拉菜单时，将打开一个模态框，不会出现错误

演示

stackblitz中演示的链接

笔记

• 如“您需要了解的有关 ExpressionChangedAfterItHasBeenCheckedError 的所有信息”中所述，我尝试触发更改检测（请参阅 app.component.ts:48-49 内的注释，标记为 STEP-1 和 STEP-2），但未成功（可能触发）没在正确的地方？）
• 演示中的模式未完全实现 [确定] 和 [取消]，因为它不会影响错误
• 该代码是较大应用程序的简化版本

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

叉式堆栈闪电战

更新

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