Angular中如何查找数组total、price最值并为对应文本设置红绿样式

第一步：在组件.ts文件中预计算最值与出现次数 #

先一次性计算所有需要的最值和对应出现次数，避免模板中重复计算影响性能，尤其数据量较大时更推荐提前计算：

// 假设items是你已获取到的数组
items: any[] = [];

// 定义存储最值与计数的变量
minTotal!: number;
maxTotal!: number;
totalMinCount!: number;
totalMaxCount!: number;

minPrice!: number;
maxPrice!: number;
priceMinCount!: number;
priceMaxCount!: number;

// 在items赋值完成后调用该方法计算
calcExtremum() {
  // 提取所有total、price值
  const totalList = this.items.map(item => item.total);
  const priceList = this.items.map(item => item.price);

  // 计算total的最值及出现次数
  this.minTotal = Math.min(...totalList);
  this.maxTotal = Math.max(...totalList);
  this.totalMinCount = totalList.filter(v => v === this.minTotal).length;
  this.totalMaxCount = totalList.filter(v => v === this.maxTotal).length;

  // 计算price的最值及出现次数
  this.minPrice = Math.min(...priceList);
  this.maxPrice = Math.max(...priceList);
  this.priceMinCount = priceList.filter(v => v === this.minPrice).length;
  this.priceMaxCount = priceList.filter(v => v === this.maxPrice).length;
}

第二步：修改模板绑定ngClass判断条件 #

按照需求绑定染色逻辑，同时补充price字段的渲染（如需）：

<div *ngFor="let item of items;"> 
  <div>{{item.category}}</div>
  <!-- total字段染色 -->
  <div 
    [ngClass]="{
      'is-green': item.total === minTotal && totalMinCount === 1,
      'is-red': item.total === maxTotal && totalMaxCount === 1
    }"
  >
    {{item.total}}
  </div>
  <!-- price字段染色 -->
  <div 
    [ngClass]="{
      'is-green': item.price === minPrice && priceMinCount === 1,
      'is-red': item.price === maxPrice && priceMaxCount === 1
    }"
  >
    {{item.price}}
  </div>
</div>

逻辑说明 #

• 所有最值计算提前在TS中完成，仅执行一次，性能远高于在模板中写计算逻辑，适配大数据量场景
• 染色同时满足两个条件：值等于对应最值、该最值在数组中仅出现一次，符合你要求的「唯一最值才染色，重复不染色」规则
• 原有scss样式无需修改，直接复用即可

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