Angular中根据条件修改mat-checkbox颜色与文字，解决勾选后图标消失问题

1. 修复勾选图标消失问题 #

你当前代码同时使用了[(ngModel)]双向绑定和[checked]手动控制选中状态，两者状态冲突会导致选中渲染异常，直接删除[(ngModel)]绑定即可，你已经实现了change事件和[checked]状态控制逻辑，无需额外绑定ngModel。

2. 自定义mat-checkbox选中态颜色 #

Angular Material组件样式默认有视图封装，需要通过::ng-deep穿透修改选中态样式，避免勾选图标和背景色重合导致消失，可在对应组件的css文件中添加以下样式：

/* 选中态复选框背景、边框颜色 */
::ng-deep .pharmacy-checkbox .mat-checkbox-checked .mat-checkbox-background {
  background-color: #1976d2; /* 可替换为你需要的主色 */
  color: #fff; /* 勾选图标颜色 */
}
::ng-deep .pharmacy-checkbox .mat-checkbox-checked .mat-checkbox-checkmark-path {
  stroke: #fff !important; /* 强制指定勾选对勾的颜色，避免和背景重合 */
}

3. 实现选中态文字颜色切换 #

你当前mat-label写死了行内颜色样式，删除行内样式后，通过[ngStyle]根据选中状态动态绑定颜色即可，修改后的HTML代码如下：

<div *ngFor="let subtenant of currentSubtenants; let i = index;" class="subtenant-form-btn-group"  [ngClass]="{'v-bg-color': currentSelectedTenants(subtenant)}">
  <div class="deal-form-btn-group-radio">
    <div class="pharmacy-checkbox">
      <mat-checkbox
       color="accent"  
       [checked]="currentSelectedTenants(subtenant)" 
       (change)="changeCurrentSubtenants($event,subtenant)"
       style="margin-left:10px;">
      <mat-label 
        class="subtenant-label" 
        [ngStyle]="{'color': currentSelectedTenants(subtenant) ? 'rgba(0, 0, 0, 0.87)' : '#fff'}"
      >{{subtenant.subtenantName}}</mat-label>
      </mat-checkbox>  
      </div>
  </div>
  <div >
    <div class="flex-column">
      <mat-label 
        class="subtenant-label"
        [ngStyle]="{'color': currentSelectedTenants(subtenant) ? 'rgba(0, 0, 0, 0.87)' : '#fff'}"
      >Current Lease Expiration</mat-label>
      <div 
        class="subtenant-label"
        [ngStyle]="{'color': currentSelectedTenants(subtenant) ? 'rgba(0, 0, 0, 0.87)' : '#fff'}"
      >{{subtenant.currentLeaseExpiration}}</div>
    </div>
  </div>
</div>

如果需要所有文字同步切换颜色，也可以直接在v-bg-color类中统一设置子元素的颜色，不需要逐个绑定：

.v-bg-color .subtenant-label {
  color: rgba(0, 0, 0, 0.87) !important;
}
.subtenant-form-btn-group:not(.v-bg-color) .subtenant-label {
  color: #fff !important;
}

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