Angular中如何为mat-select设置匹配orders数组的初始值

• 问题核心触发逻辑：两个mat-select均显示Tacos选中项，本质是所有组件的绑定值统一指向了第二个订单的dish: "tacos-2"值，最终匹配到同一个下拉选项。
• 拆分独立绑定值，避免多组件共用同一份值
  循环渲染对应订单的mat-select时，需按当前循环项取匹配的dish值作为组件绑定值，禁止全局统一引用公共变量给所有select赋值：
  错误写法（会导致所有select值取数组最后一个元素）：

  // 错误：公共变量统一指向最后一个订单的dish值
  sharedSelectedDish = this.orders[this.orders.length - 1].dish;
  

  正确逻辑：
  • 模板通过*ngFor渲染select时，直接把当前循环项的dish字段作为select的绑定值，给select关联的表单控件赋值当前项的dish值
  • 使用ReactiveForm开发时，为每个mat-select单独创建独立的FormControl实例，不要让多个组件复用同一个控件。
• 严格对齐mat-option的value与orders存储格式
  mat-select的选中项匹配采用严格全等判断，只要option的value与绑定值类型、内容存在差异就会匹配失效：
  • 确保所有mat-option的value值和orders数组存储的字符串完全匹配：比如牛排选项的value为'steak-0'，塔可选项的value为'tacos-2'，不要出现option写死短字符串、与存储值后缀不匹配的问题
  • 避免option绑定整个餐品对象、但绑定值是字符串id的类型错配场景
• 适配异步加载的时序场景
  如果orders数组是接口异步返回的，需确保mat-select渲染时绑定值已经完成赋值，不要在空值状态下提前渲染组件导致匹配异常，可等orders数据赋值完成后再触发select组件渲染。

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