如何在数组上找到最小值、最大值以及如何使用角度更改最小绿色和最大红色的颜色文本

Posted 2023-03-17

【中文标题】如何在数组上找到最小值、最大值以及如何使用角度更改最小绿色和最大红色的颜色文本

【英文标题】：How to find min , max on array and how to change color text for min green color and max red color using angular

【发布时间】：2021-12-02 02:18:03

【问题描述】：

我有如下 JSON，但我有很多数据：

项目：[ itemId: "22222", 类别：'A'， 总数：100 , itemId: "666666", 类别：'A'， 总数：80 , 项目 ID：“555”， 类别：'B'， 总数：50 …… ... 项目 ID：“555”， 类别：'B'， 总计：2 ]

我在.scss 上创建

   &.is-green 
      color: green;
    
    &.is-red 
      color: red;
    

我想像这样使用它：

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

从这个数据中我想找到最小的total 并将颜色更改为绿色。 我还想找到 max total 并将颜色更改为红色。

请问，你知道怎么做吗？

【参考方案1】：

所以，这个问题有两个部分，对吧？ 第一个是sorting 第二个是changing the first and last items green and red。

对于排序，你可以使用这个

items = items.sort((fstItem, secItem)=> fstItem.total > secItem.total ? 1 :
fstItem.total < secItem.total -1 : 0 );

第二件事，您可以在 html 中使用*ngFor 的第一个和最后一个索引

<div *ngFor="let item of items; first as isFirstItem; last as isLastItem;"> 
  <div>item.category</div>
  <div [ngClass]="'is-green': isFirstItem,
                   'is-red': isLastItem
                    ">
   item.total
  </div>
</div>

【讨论】：

您还可以获取最小值和最大值（使用 reduce 或简单循环）并使用类似：[style.background]=item.total==minValue?'green':item.total==maxValue?'red':null

谢谢，效果很好。如果我有更多的价值，例如 items: [ itemId: "22222", category: 'A', total: 100, price:20 , itemId: "666666", category: 'A', total: 80 , price:25, itemId: "555", category: 'B', total: 50,price:20 .... ... itemId: "555", category: 'B', total: 2 , price:21 ]` 如何对total 和price 进行排序？

根据您的优先级，您必须排序两次。按总计排序，然后按价格或其他方式排序。

hmm，我在上面发现了一个问题，我想给最小值和最大值上色。此解决方案仅对数组上的第一项和数组上的最后一项着色。请问可以改吗？

根据您的数组，第一项和最后一项不是最小值和最大值？