Angular如何获取数组total的最大最小值并给对应文本设置红绿颜色

第一步：在组件ts文件中预计算total的极值 #

首先在组件类中定义存储最大/最小值的变量，在拿到items数组后计算极值即可：

// 组件类中声明两个成员变量
maxTotal: number;
minTotal: number;

// 以下逻辑在items数组赋值完成后执行（如果是异步接口返回数据就写在接口回调里）
// 避免空数组报错先做长度判断
if (this.items?.length) {
  // 提取所有total字段组成新数组
  const totalList = this.items.map(item => item.total);
  this.maxTotal = Math.max(...totalList);
  this.minTotal = Math.min(...totalList);
}

第二步：修改模板中的ngClass判断规则 #

把原来的占位判断条件替换为和极值匹配的逻辑即可：

<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