Angular Material表格行绑定ngClass选中样式报变量未定义如何解决

• 修正模板变量引用错误
  你在*matRowDef语法中声明的当前行变量是let row，并未定义过名为planet的变量，所以读取planet.selected会抛出未定义错误。表格行对应的planet对象就是row本身，直接使用row.selected读取选中状态即可。
• 修正布尔值判断逻辑
  你业务逻辑中给selected属性赋值的是布尔类型的true，而非字符串'true'，原有判断条件=== 'true'永远不会成立，直接判断row.selected即可。
• 补全CSS样式确保边框生效
  Angular Material原生mat-row默认未配置border的宽度和样式，仅设置border-color不会显示边框，需要补全相关样式属性。

修正后代码 #

表格行模板代码 #

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row [ngClass]="{'selectedPlanet': row.selected}" *matRowDef="let row; columns: displayedColumns;"></tr>

样式代码 #

.selectedPlanet {
  border: 1px solid red;
  box-sizing: border-box;
}

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