Angular13 Material Table 勾选行复选框时条件计算渲染单元格值实现方法

核心思路是为每行数据新增勾选状态字段，将复选框与该字段双向绑定，结果列根据字段值判断是否渲染乘积结果。

1. 修改组件TS代码 #

第一步：更新InputData接口，新增勾选状态字段 #

export interface InputData {
  id: number;
  name: string;
  a: number;
  b: number;
  // 新增行勾选状态标记
  isChecked?: boolean;
}

第二步：初始化数据时给每行添加默认未勾选状态 #

修改constructor中vmi数组的初始化逻辑：

constructor(private fb: FormBuilder) {
  // 给每一行数据新增isChecked字段，默认未勾选
  const vmi = [
    {id: 1, name: 'first', a: 20, b: 1.1, isChecked: false}, 
    {id: 1, name: 'second', a: 35, b: 1.7, isChecked: false},
  ];
  this.dataSource = new MatTableDataSource(vmi);
}

可选依赖补充 #

如果双向绑定运行时报错，需要在项目的根模块（通常是AppModule）中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已有导入项
    FormsModule
  ]
})
export class AppModule { }

2. 修改HTML模板代码 #

第一步：绑定复选框和行勾选状态 #

找到复选框所在的td，修改mat-checkbox的代码：

<td mat-cell *matCellDef="let row"> 
  <mat-checkbox [(ngModel)]="row.isChecked" [ngModelOptions]="{standalone: true}"></mat-checkbox> 
</td>

第二步：修改结果列的渲染逻辑 #

找到result列的td，根据isChecked状态判断是否展示乘积：

<td mat-cell *matCellDef="let row"> {{row.isChecked ? (row.a * row.b) : ''}} </td>

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