Angular变更检测疑问：多变量赋值为何致下拉框短暂显示undefined？

我在项目中使用异步Observable获取产品数据时，遇到了下拉框加载异常的情况：

• 先将异步请求结果赋值给临时变量productList，再转赋值给绑定下拉框的productDetailTable时，下拉框会短暂显示undefined，必须多次点击后才会加载出选项
• 直接将异步请求结果赋值给productDetailTable时，下拉框能立即正常填充选项

出现异常的代码 #

this.productList = await this.ProductService.getProductsById(projectId).toPromise();
this.productDetailTable = this.productList;

正常工作的代码 #

this.productDetailTable = await this.ProductService.getProductsById(projectId).toPromise();

模板中的下拉框代码 #

<ng-multiselect-dropdown 
    [placeholder]="'aaaaaaaaaa'" 
    formControlName="aaaaaaaaaa"
    [settings]="dropdownSettings"
    [data]="productDetailTable" 
    class="singleselect" 
    [(ngModel)]="aaaaaaaaaaaaa"
    [ngModelOptions]="{standalone: true}">
</ng-multiselect-dropdown>

问题原因 #

这和Angular的变更检测机制有关：

1. 第一次赋值给productList时，Angular会立刻触发一次变更检测，但此时productDetailTable还未被赋值，下拉框绑定的data是undefined，所以显示异常
2. 后续给productDetailTable赋值时，可能因为当前变更检测周期已经结束，没有自动触发新的检测，导致下拉框没有及时更新，直到手动点击组件触发变更检测才会刷新数据

解决方案 #

除了直接赋值的方式，还可以通过以下方法确保变更检测及时触发：

• 手动调用ChangeDetectorRef触发检测：

// 先导入ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core';

// 在组件构造函数中注入
constructor(private cdr: ChangeDetectorRef) {}

// 在赋值完成后手动触发检测
this.productList = await this.ProductService.getProductsById(projectId).toPromise();
this.productDetailTable = this.productList;
this.cdr.detectChanges();

内容的提问来源于stack exchange，提问作者mohammad eunus