如何通过ngModel从mat-select/mat-option中获取选中项ID

没问题，我来给你拆解下完整的实现方案，刚好适配你用ngModel联动表格+mat-select动态选项的场景：

第一步：组件类（.ts文件）准备数据和方法 #

首先在你的组件类里定义状态列表、绑定表单的交易对象，还有处理选中ID的方法——如果状态是从后端接口获取的，记得用异步请求（比如HttpClient）来填充statusList：

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

@Component({
  selector: 'app-trade-manager',
  templateUrl: './trade-manager.component.html',
  styleUrls: ['./trade-manager.component.css']
})
export class TradeManagerComponent {
  // 模拟动态状态列表，实际项目可替换为API请求结果
  statusList = [
    { ID: 1, name: '待处理' },
    { ID: 2, name: '已完成' },
    { ID: 3, name: '已取消' }
  ];

  // 和表格联动的交易对象，ngModel会同步这里的数值
  newTrade = {
    Status: { ID: 1 }, // 设置默认选中的状态ID
    // 其他需要绑定的字段...
  };

  // 接收选中ID的方法，这里可以写你的业务逻辑
  setStatusID(selectedId: number) {
    console.log('当前选中的状态ID:', selectedId);
    // 比如同步更新表格数据、发起后端请求等操作
  }
}

第二步：模板（.html文件）实现mat-select和表格 #

在模板里把mat-select和ngModel绑定，同时通过ngModelChange事件传递选中的ID：

<!-- 编辑表单的mat-select组件 -->
<mat-form-field appearance="outline">
  <mat-label>交易状态</mat-label>
  <mat-select 
    [(ngModel)]="newTrade.Status.ID" 
    (ngModelChange)="setStatusID($event)">
    <!-- 循环渲染动态选项，value绑定状态ID -->
    <mat-option 
      *ngFor="let status of statusList" 
      [value]="status.ID">
      {{ status.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 联动的项目列表表格示例 -->
<table class="trade-table">
  <thead>
    <tr>
      <th>状态ID</th>
      <th>状态名称</th>
      <!-- 其他表格列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ newTrade.Status.ID }}</td>
      <td>{{ statusList.find(s => s.ID === newTrade.Status.ID)?.name }}</td>
      <!-- 其他列数据 -->
    </tr>
  </tbody>
</table>

关键逻辑说明 #

• [(ngModel)]="newTrade.Status.ID"：双向绑定的核心，既会把下拉框选中的ID同步到newTrade对象，也会在newTrade数据变化时自动更新下拉框的选中状态，完美实现和表格的联动。
• (ngModelChange)="setStatusID($event)"：当选中项变化时触发这个事件，$event就是你在mat-option上绑定的status.ID，直接传入方法就能拿到选中的ID，不用额外处理。
• [value]="status.ID"：这里一定要绑定状态的ID值，而不是整个状态对象，这样$event传递的就是你需要的ID数值，符合你的需求。

额外注意点 #

如果你的状态列表是异步加载的（比如从后端接口获取），记得给mat-select加*ngIf="statusList.length > 0"，避免数据未加载完成时出现空指针问题；另外，确保newTrade.Status.ID的初始值存在于statusList中，这样页面加载时会有默认选中项。

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