Angular v10下拉菜单选中值无法持久显示的问题（HTML实现）

这个问题很常见——你的按钮目前绑定的是固定文本"On Time"，没有和选中的菜单项关联起来，所以点击后自然不会更新。咱们可以通过绑定数据对象的属性来解决，具体步骤如下：

1. 绑定按钮文本到数据属性 #

首先，把按钮的固定文本改成绑定当前行element的一个属性（比如sla2Status），这样按钮文本会跟着这个属性的值变化：

<button mat-button [matMenuTriggerFor]="menu">{{element.sla2Status || 'On Time'}}</button>

这里用|| 'On Time'是为了处理初始状态——如果element还没有sla2Status属性，就默认显示"On Time"。

2. 给菜单项添加点击事件更新属性 #

给每个mat-menu-item添加点击事件，点击时直接把对应的值赋值给element.sla2Status：

<mat-menu #menu="matMenu"> 
  <button mat-menu-item (click)="element.sla2Status = 'On Time'">On Time</button> 
  <button mat-menu-item (click)="element.sla2Status = 'Late'">Late</button> 
  <button mat-menu-item (click)="element.sla2Status = 'Missing'">Missing</button> 
  <button mat-menu-item (click)="element.sla2Status = 'NDR'">NDR</button> 
</mat-menu>

3. 初始化数据属性（可选） #

如果你的数据源里原本没有sla2Status这个属性，需要在组件类里给每一行数据初始化这个属性，确保初始显示"On Time"：

// 假设你的表格数据源是dataSource
this.dataSource.data.forEach(item => {
  // 如果没有该属性，设置初始值
  if (!item.sla2Status) {
    item.sla2Status = 'On Time';
  }
});

完整修改后的代码 #

<ng-container matColumnDef="sla2"> 
  <th mat-header-cell *matHeaderCellDef mat-sort-header> SLA2</th> 
  <td mat-cell *matCellDef="let element"> 
    <button mat-button [matMenuTriggerFor]="menu">{{element.sla2Status || 'On Time'}}</button> 
    <mat-menu #menu="matMenu"> 
      <button mat-menu-item (click)="element.sla2Status = 'On Time'">On Time</button> 
      <button mat-menu-item (click)="element.sla2Status = 'Late'">Late</button> 
      <button mat-menu-item (click)="element.sla2Status = 'Missing'">Missing</button> 
      <button mat-menu-item (click)="element.sla2Status = 'NDR'">NDR</button> 
    </mat-menu> 
  </td> 
</ng-container>

这样修改后，点击任意菜单项，按钮文本都会立刻更新为选中的内容，而且每一行的下拉状态都是独立的，不会互相影响～

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