如何使用条件CSS结合ngClass根据数值动态修改饼图的颜色？

1. 修正HTML语法并绑定动态变量 #

你原有代码中[ngClass]属性后多写了一个闭合方括号，属于Angular模板语法错误，先修正。同时建议将硬编码的数值抽为组件变量，方便动态判断：

<div class="progressDiv">
  <div class="statChartHolder">
    <div class="progress-pie-chart"><!--Pie Chart -->
      <div class="ppc-progress">
        <!-- 直接用数值判断不需要额外定义colorStatus，也可保留原有colorStatus逻辑 -->
        <div class="ppc-progress-fill" [ngClass]="{
          'red': pendingCount > 30,
          'yellow': pendingCount > 20 && pendingCount <=30,
          'green': pendingCount <=20
        }"></div>
      </div>
      <div class="ppc-percents">
        <div class="pcc-percents-wrapper">
          <!-- 数值绑定组件变量，同时同步文本颜色 -->
          <span [ngClass]="{
            'red': pendingCount > 30,
            'yellow': pendingCount > 20 && pendingCount <=30,
            'green': pendingCount <=20
          }">{{ pendingCount }}</span>
          <span id="pending">projects pending</span>
        </div>
      </div>  
    </div><!--End Chart -->
  </div>    
</div>

2. 补充CSS颜色类规则 #

你现有基础样式的优先级低于带类名的选择器，新增对应颜色类即可覆盖基础样式：

/* 原有基础样式可保留，新增以下规则 */
.ppc-progress .ppc-progress-fill.green {
  background: #81CE97;
}
.ppc-progress .ppc-progress-fill.yellow {
  background: #ffc107;
}
.ppc-progress .ppc-progress-fill.red {
  background: #f44336;
}

.ppc-percents span.green {
  color: #81CE97;
}
.ppc-percents span.yellow {
  color: #ffc107;
}
.ppc-percents span.red {
  color: #f44336;
}

3. 组件TS中定义对应变量 #

在你的Angular组件类中定义数值变量即可，数值更新时样式会自动同步切换：

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  // 替换为你的实际业务数据源
  pendingCount: number = 49;
}

如果你仍想使用原有colorStatus变量的判断逻辑，可新增一个动态getter：

get colorStatus(): number {
  if (this.pendingCount <= 20) return 3;
  else if (this.pendingCount <= 30) return 2;
  else return 1;
}

内容的提问来源于stack exchange，提问作者kw1c-MuurmansLorentz