Angular中mat-select绑定数据库值时如何设置默认显示值？

在Angular页面的表格中，通过Java REST API从数据库获取数据，其中esValido字段的值为1或0。需将该字段替换为mat-select组件，用“Yes”对应1、“No”对应0展示。目前mat-select可正常展开显示选项，但进入页面时无法默认显示数据库返回值对应的文本，使用[value]属性无效，需解决以下问题：

• 缺失的配置项是什么？
• 如何通过[selected]属性实现默认值设置？

现有代码 #

HTML代码 #

<ng-container matColumnDef="esValido">
  <th mat-header-cell *matHeaderCellDef> ES VALIDO </th>
  <td mat-cell *matCellDef="let element">
    <mat-select [value]="element.esValido">
      <mat-option *ngFor="let valid of esValidoArr" [value]="valid.valor">
        {{ valid.label}}
      </mat-option>
    </mat-select>
  </td>
</ng-container>

Component.ts代码 #

esValidoArr = [
    { label: 'Yes', valor: 1 },
    { label: 'No', valor: 0 },
  ];

//get the list from service
dataSource: any;
private obtenerLista() {
  this.controlService.obtenerLista().subscribe((response) => {
    this.control = response.data;
    this.dataSource = new MatTableDataSource(this.control);
    this.dataSource.paginator = this.paginator;
  });
}

解决方案 #

一、修复[value]无效的问题 #

核心原因大概率是数据类型不匹配：数据库返回的esValido可能是字符串类型（如"1"/"0"），而mat-option绑定的valor是数字类型（1/0），导致Angular无法匹配对应选项。

解决方法二选一：

1. 在TS中转换数据类型：
   在订阅数据时，将esValido字段转为数字：

   private obtenerLista() {
     this.controlService.obtenerLista().subscribe((response) => {
       // 转换esValido为数字类型
       this.control = response.data.map(item => ({
         ...item,
         esValido: Number(item.esValido)
       }));
       this.dataSource = new MatTableDataSource(this.control);
       this.dataSource.paginator = this.paginator;
     });
   }
   

2. 在HTML中统一为字符串类型：
   将mat-option的[value]转为字符串，和数据库返回值类型匹配：

   <mat-option *ngFor="let valid of esValidoArr" [value]="valid.valor.toString()">
     {{ valid.label}}
   </mat-option>
   

二、通过[selected]属性设置默认值 #

[selected]是mat-option的属性，需在每个选项上判断是否与当前行的esValido匹配，匹配则设为选中状态：

修改后的HTML代码

<ng-container matColumnDef="esValido">
  <th mat-header-cell *matHeaderCellDef> ES VALIDO </th>
  <td mat-cell *matCellDef="let element">
    <mat-select>
      <mat-option 
        *ngFor="let valid of esValidoArr" 
        [value]="valid.valor"
        [selected]="valid.valor === Number(element.esValido)"> <!-- 注意类型转换 -->
        {{ valid.label}}
      </mat-option>
    </mat-select>
  </td>
</ng-container>

注意：如果数据库返回的esValido是数字类型，可去掉Number()转换，直接写valid.valor === element.esValido。

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