Angular中如何同时标记所有值为最大值的变量并修改字体颜色

问题根源 #

原代码仅记录了第一个出现的最大值对应的key，导致后续相同最大值的变量无法被标记。

修改后的TypeScript逻辑 #

将函数逻辑改为先计算所有值的最大值，再判断当前变量值是否等于最大值，这样所有等于最大值的变量都会被标记：

calculateconfirm(location1, location2, location3, location4, type) {
    const obj = { 'location1': location1, 'location2': location2, 'location3': location3, 'location4': location4 };
    // 计算所有值中的最大值
    const maxValue = Math.max(...Object.values(obj));
    // 判断当前type对应的值是否等于最大值
    return obj[type] === maxValue ? '#5D3FD3' : '#301934';
}

逻辑说明 #

1. 用Object.values(obj)提取所有位置的数值，再通过Math.max()直接得到最大值，比循环遍历更简洁高效。
2. 直接对比当前type对应的数值和最大值，只要相等就应用目标颜色，不管有多少个变量符合条件。

验证示例 #

当obj = { 'location1': 2, 'location2': 1, 'location3': 5, 'location4': 5 }时，maxValue为5，location3和location4对应的数值都等于5，因此两者的字体颜色都会被设置为#5D3FD3。

HTML代码无需修改，保持原有调用方式即可。

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