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

Question

我有如下所示的 JSON 但我有很多数据：

项目：[ { itemId: "22222", 类别：'A'，总计：100 }, { itemId: "666666", 类别：'A'，总计：80 }, { 项目编号：“555”，类别：'B'，总计：50 } .... ... { 项目编号：“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 并将颜色更改为红色。

拜托，你知道怎么做吗？

Answer 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>

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

How to find min , max on array and how to change color text for min green color and max red color using angular

angular

typescript

max

min

ng-class