Angular mat-table内嵌mat-select选值绑定与显示问题

两个问题均由绑定作用域错误导致：

• 所有行的mat-select共用同一个全局变量selectedDesc做双向绑定，任意行修改选值都会同步更新全局变量，触发所有行的选值同步变更
• 初始选值没有和行数据做绑定，全局变量无法和每行下拉选项的value做匹配，导致初始选中态无法正常渲染

1. 调整数据源结构，存储行级选中值 #

废弃全局的selectedDesc变量，在表格数据源的每一行数据对象上新增selectedDesc字段，初始化时直接给该字段赋预设的初始选中值：

// 表格数据源初始化示例
this.tableData = [
  {
    id: 1,
    itemName: '数据项1',
    selectOptions: ['已完成', '进行中', '待启动'],
    selectedDesc: '待启动' // 该行预设初始选中值
  },
  {
    id: 2,
    itemName: '数据项2',
    selectOptions: ['已完成', '进行中', '待启动'],
    selectedDesc: '进行中' // 该行预设初始选中值
  },
  {
    id: 3,
    itemName: '数据项3',
    selectOptions: ['已完成', '进行中', '待启动'],
    selectedDesc: '已完成' // 该行预设初始选中值
  }
];
this.dataSource = new MatTableDataSource(this.tableData);

2. 模板绑定行级字段，实现选值隔离 #

在mat-cell定义中通过*matCellDef="let row"拿到当前行数据，将mat-select的ngModel直接绑定到当前行的selectedDesc字段：

<!-- 下拉选框列 -->
<ng-container matColumnDef="statusSelect">
  <mat-header-cell *matHeaderCellDef>状态</mat-header-cell>
  <mat-cell *matCellDef="let row">
    <mat-select [(ngModel)]="row.selectedDesc">
      <mat-option *ngFor="let option of row.selectOptions" [value]="option">
        {{ option }}
      </mat-option>
    </mat-select>
  </mat-cell>
</ng-container>

3. 绑定保存事件，打印当前行选值 #

给每行的保存图标绑定点击事件，传入当前行数据，触发时直接读取行上的选中值打印即可：

<!-- 操作列 -->
<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef>操作</mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-icon-button (click)="handleSave(row)">
      <mat-icon>save</mat-icon>
    </button>
  </mat-cell>
</ng-container>

对应组件中的事件方法：

handleSave(row: any) {
  console.log('当前行选中的状态值：', row.selectedDesc);
  // 此处可追加后续接口保存逻辑
}

• 若使用响应式表单实现编辑逻辑，同理需要给每一行生成独立的FormControl实例，禁止所有行共用同一个控件实例，否则会出现相同的选值联动问题
• 若初始选中值不生效，检查绑定的selectedDesc值和mat-option的[value]值类型、内容是否完全一致，比如不要一边存数字id，一边给option绑定字符串值，会导致匹配失败

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