Angular中如何动态高亮玩家统计数据的最大值项

这个需求挺实用的，我来帮你实现高亮每行统计最大值的效果，分两种方式给你参考，一种是通用灵活的，一种是性能更优的：

方式一：通用方法（适合字段较多的场景） #

首先在组件类里写一个通用方法，用来获取指定统计字段的最大值，这样以后新增其他统计项（比如loseCount）也能直接复用：

// 先定义你的玩家统计类型（如果还没定义的话）
interface PlayerStat {
  gameCount: number;
  winCount: number;
  // 可以添加其他统计字段
}

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent {
  stats: PlayerStat[] = []; // 你的玩家统计数组

  // 获取指定字段的最大值
  getMaxStatValue(statKey: keyof PlayerStat): number {
    return Math.max(...this.stats.map(stat => stat[statKey]));
  }
}

然后在模板里，通过[ngClass]动态绑定高亮样式，判断当前统计值是否等于对应字段的最大值：

<tr>
  <td *ngFor="let stat of stats">
    <div [ngClass]="{'highlight': stat.gameCount === getMaxStatValue('gameCount')}">
      {{stat.gameCount}}
    </div>
  </td>
</tr>
<tr>
  <td *ngFor="let stat of stats">
    <div [ngClass]="{'highlight': stat.winCount === getMaxStatValue('winCount')}">
      {{stat.winCount}}
    </div>
  </td>
</tr>

最后在组件的CSS文件里定义高亮样式：

.highlight {
  background-color: #ffeb3b; /* 亮黄色，可根据需求自定义颜色 */
  font-weight: bold;
  color: #333;
}

方式二：预计算最大值（适合数据量大的场景） #

如果你的stats数组数据量比较大，每次循环都调用方法计算最大值可能会有性能损耗，这时候可以提前把最大值计算好存为组件属性：

@Component({
  // 组件元数据
})
export class YourComponent {
  stats: PlayerStat[] = [];
  maxGameCount: number = 0;
  maxWinCount: number = 0;

  ngOnInit(): void {
    // 初始化时计算最大值
    this.updateMaxStats();
  }

  // 当stats数据更新时，调用这个方法重新计算最大值
  updateMaxStats(): void {
    if (this.stats.length === 0) {
      this.maxGameCount = 0;
      this.maxWinCount = 0;
      return;
    }
    this.maxGameCount = Math.max(...this.stats.map(s => s.gameCount));
    this.maxWinCount = Math.max(...this.stats.map(s => s.winCount));
  }
}

模板里直接使用预计算好的最大值属性即可：

<tr>
  <td *ngFor="let stat of stats">
    <div [ngClass]="{'highlight': stat.gameCount === maxGameCount}">
      {{stat.gameCount}}
    </div>
  </td>
</tr>
<tr>
  <td *ngFor="let stat of stats">
    <div [ngClass]="{'highlight': stat.winCount === maxWinCount}">
      {{stat.winCount}}
    </div>
  </td>
</tr>

这样每次数据更新时只计算一次最大值，性能会更优。

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