为何attr.disabled与[class.disabled]无法禁用指定条件的mat-row行？

你遇到的问题核心是：mat-row本身没有原生的disabled属性，单纯加类或者设置attr.disabled只会改变样式，不会真正禁用行的交互；另外你的类绑定写法可以简化，但关键是要兼顾视觉禁用和交互禁用。

步骤1：先搞定视觉上的禁用样式 #

在组件的CSS里添加.disabled类的样式，让行看起来是禁用状态：

.mat-row.disabled {
  background-color: #f5f5f5; /* 浅灰色背景 */
  color: #999; /* 灰色文字 */
  pointer-events: none; /* 直接阻止鼠标交互，简单粗暴 */
  cursor: default;
}

步骤2：修正行的类绑定写法 #

你的类绑定可以简化，不需要三元表达式，直接用布尔值判断就行，Angular会自动添加/移除类：

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row 
  *matRowDef="let row; columns: displayedColumns;" 
  [class.disabled]="row?.statut === 'TRM'">
</mat-row>

如果pointer-events: none不够用（比如要保留某些交互但禁用特定操作） #

如果需要更精细的控制，比如允许hover但禁用点击事件，可以在行的点击事件里判断状态：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;" 
  [class.disabled]="row?.statut === 'TRM'"
  (click)="handleRowClick(row)">
</mat-row>

然后在组件TS里处理：

handleRowClick(row: any) {
  if (row.statut === 'TRM') {
    return; // 禁用状态不执行任何操作
  }
  // 正常行的处理逻辑
}

排查小技巧 #

• 打开浏览器开发者工具，检查对应行的DOM元素，看看.disabled类有没有被正确加上
• 确认row?.statut的取值确实是'TRM'（注意大小写，字符串匹配要完全一致）

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