Angular 5 Material：动态更新mat-options后mat-select显示异常

我看你遇到的问题是：当通过API获取数据填充mat-select的选项后，虽然给ngModel赋值了第一项的ID，但下拉框的显示值没跟着更新。咱们一步步来解决这个问题：

首先修正最容易忽略的低级错误：缺少this关键字 #

看你的component.ts里的getProductIDs方法，最后赋值的代码写的是：

productID = products[0].id;

这里的productID是方法内的局部变量，根本没赋值给组件类的productID属性！正确的写法应该是：

this.productID = this.products[0].id;

先把这个改了，大概率能解决问题。

如果还是没生效，检查变更检测是否触发 #

如果你的API调用是在Angular的变更检测上下文之外（比如用了原生fetch或者非Angular的异步库），Angular可能没检测到products和productID的变化。这时候可以手动触发变更检测：

1. 先在组件中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

2. 在API返回数据并更新products和productID之后，调用detectChanges()：

getProductIDs(){
  // 调用API获取数据的逻辑
  this.yourApiService.getProducts(this.orderID).subscribe(response => {
    this.products = response.data;
    this.productID = this.products[0].id;
    // 手动触发变更检测
    this.cdr.detectChanges();
  });
}

额外注意：确保数组引用发生变化 #

如果你的API返回数据后是用push方法往products数组里加元素，Angular的变更检测可能因为数组引用没变化而忽略更新。建议直接替换数组引用：

// 不要用push，而是重新赋值数组
this.products = [...response.data];
// 或者直接赋值
this.products = response.data;

最后确认模板绑定逻辑 #

你的模板里mat-select的[(ngModel)]绑定productID，mat-option的[value]绑定product.id，这部分逻辑是对的，只要productID和product.id的类型完全一致（都是数字或字符串）就不会有问题。

按上面的步骤逐一排查，应该就能解决显示不更新的问题了。

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