Angular中如何在*ngFor内使用ngClass按数值大小动态修改文本颜色

步骤1：在组件TS文件中预计算最大/最小值 #

你需要先在拿到items数据后，提前计算出所有total字段的最大值和最小值，避免在模板中重复计算损耗性能：

// 组件类中先定义两个存储最值的变量
maxTotal!: number;
minTotal!: number;

// 成功获取items数据后执行以下计算
const totals = this.items.map(item => item.total);
this.maxTotal = Math.max(...totals);
this.minTotal = Math.min(...totals);

步骤2：修正模板的ngClass判断逻辑 #

你原有写法的问题是：只要item.total为真值（不为0、undefined、null等），就会同时添加is-green和is-red两个类，样式冲突自然无法达到预期效果，调整为判断当前item的total是否等于预计算的最值即可：

<div *ngFor="let item of items"> 
    <div>{{item.category}}</div>
    <div 
      [ngClass]="{
        'is-green': item.total === minTotal,
        'is-red': item.total === maxTotal
      }"
    >
       {{item.total}}
    </div>
</div>

补充说明 #

如果存在多个total值相同的最大值/最小值，所有符合条件的项都会应用对应样式，符合常规业务需求。

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