如何根据状态设置Angular Material复选框颜色？解决半选状态颜色异常

核心思路 #

你当前固定设置了color="primary"，导致所有状态（包括半选）都会应用primary主题色。需要动态绑定color属性，根据复选框的状态切换是否应用primary颜色：

• 选中状态（data.isCriticalPath为true）：保留primary颜色
• 半选/未选中状态：不设置主题色，使用组件默认样式

修改后的代码 #

<mat-checkbox 
  [indeterminate]="!data.isCriticalPath" 
  (change)="checkState(data,$event,'isCriticalPath')"
  [(ngModel)]="data.isCriticalPath" 
  [color]="data.isCriticalPath ? 'primary' : undefined">
</mat-checkbox>

说明 #

• 通过[color]="data.isCriticalPath ? 'primary' : undefined"实现动态切换：当复选框处于选中状态时绑定primary主题色，半选、未选中状态则不指定主题色，自动使用Angular Material默认样式
• 半选状态的图标会恢复为组件默认的半选样式，不再受primary主题色影响

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