Angular 角度-表格中的最大值

我使用以下代码从json文件下载数据：

 ngOnInit() {
    this.http.get('assets/data.json').subscribe(res => {
      this.services = res;
    });
  }

data.json如下所示：

[
    {
      "serviceType": "FixedOnSiteSE",
      "pricingUnit": "Month",
      "towerType": "UserSupport",
      "reportItems": [
        {
          "contractYear": 1,
          "marketMedian": 11588.825,
          "marketMinimum": 9758.67,
          "savingPotential": "None",
          "savingAmount": 0,
          "savingPotentialPercent": 0,
          "currentPrice": 1050,
          "percentPayLess": 0,
          "percentPayMore": 0
        },
        {
          "contractYear": 2,
          "marketMedian": 11659.855,
          "marketMinimum": 9818.33,
          "savingPotential": "None",
          "savingAmount": 0,
          "savingPotentialPercent": 0,
          "currentPrice": 1060,
          "percentPayLess": 0,
          "percentPayMore": 0
        },
        {
          "contractYear": 3,
          "marketMedian": 11669.475,
          "marketMinimum": 9825.9,
          "savingPotential": "None",
          "savingAmount": 0,
          "savingPotentialPercent": 0,
          "currentPrice": 1065,
          "percentPayLess": 0,
          "percentPayMore": 0
        },
        {
          "contractYear": 4,
          "marketMedian": 11803.45,
          "marketMinimum": 9938.65,
          "savingPotential": "None",
          "savingAmount": 0,
          "savingPotentialPercent": 0,
          "currentPrice": 1068,
          "percentPayLess": 0,
          "percentPayMore": 0
        }
      ]
    },
    {
      "serviceType": "TicketOnSite",
      "pricingUnit": "Ticket",
      "towerType": "UserSupport",
      "reportItems": [
        {
          "contractYear": 1,
          "marketMedian": 169.8,
          "marketMinimum": 142.48,
          "savingPotential": "Low",
          "savingAmount": 277872,
          "savingPotentialPercent": 5.49,
          "currentPrice": 150.75,
          "percentPayLess": 32,
          "percentPayMore": 68
        },
        {
          "contractYear": 2,
          "marketMedian": 169.86,
          "marketMinimum": 141.14,
          "savingPotential": "Low",
          "savingAmount": 356496,
          "savingPotentialPercent": 6.99,
          "currentPrice": 151.75,
          "percentPayLess": 32,
          "percentPayMore": 68
        },
        {
          "contractYear": 3,
          "marketMedian": 171.59,
          "marketMinimum": 143.58,
          "savingPotential": "Low",
          "savingAmount": 311472,
          "savingPotentialPercent": 6.06,
          "currentPrice": 152.85,
          "percentPayLess": 34,
          "percentPayMore": 66
        },
        {
          "contractYear": 4,
          "marketMedian": 173.18,
          "marketMinimum": 145.18,
          "savingPotential": "Low",
          "savingAmount": 292320,
          "savingPotentialPercent": 5.65,
          "currentPrice": 153.88,
          "percentPayLess": 35,
          "percentPayMore": 65
        }
      ]
    }
  ]

现在，在*ngFor的帮助下，我在循环中检索数据，并以以下方式将其显示在页面上：

• 服务类型
• 普里辛古尼特
• 塔式
• 储蓄率
• 萨文加蒙特

我想从具有最高savingPotentialPercent值的元素的reportItems中检索值savingPotentialPercent和savingAmount

最好是在组件的html文件中完成。我可以用各种方式进行组合，但我无法处理：（目前，数据是从json文件下载的，最后将从数据库中检索并以json格式返回。

试试：

let max_savingPotentialPercent = Math.max( ...res[0]['reportItems'].map( x => x['savingPotential']));
let max_item = res[0]['reportItems'].find( x = > x['savingPotential'] === max_savingPotentialPercent);

---

可以根据需要创建管道

 @Pipe({
      name: 'max'
    })
    export class MaxPipe implements PipeTransform {

      transform(value: any[], prop: string) {
        if (!Array.isArray(value) || value.length === 0 || !prop) { 
          return value;
        }

        value.sort((a, b) => b[prop] - a[prop]);
        return value[0][prop];
      }
    }

在HTML中

 <table>
      <tr>
        <th>Max value</th>
      </tr>
      <tr *ngIf="data[0].reportItems | max: 'savingPotentialPercent' as result">
        <td>{{ result }}</td>

      </tr>
    </table>

最大值
{{result}}

---

Demo

您可以通过这种方式打印

savingPotentialPercent

和

savingAmount

，这里

myValue

是您的json数据，在您的json

reportItems

中有一个vlaue数组来访问它们，您必须使用嵌套循环来实现这一点

 <div *ngFor="let item of myValue">
  //main loop to get json data     
    <p *ngFor="let value of item.reportItems">
    //nested loop to get `reportItems` values
      {{ value.savingPotentialPercent }}
    </p>
 </div>

//获取json数据的主循环

//用于获取“reportItems”值的嵌套循环
{{value.savingPotentialPercent}

我认为您应该这样做：

    this.http.get('assets/data.json').pipe(
      map( (data: any) => {
        data.forEach( element => {
          element.maxValueSavingPotentialPercent = 0;
          element.reportItems.forEach(items => {
            element.maxValueSavingPotentialPercent = Math.max( element.maxValueSavingPotentialPercent, items.savingPotentialPercent );
          });
        });
        return data;
      })
    ).subscribe( data => {
      this.services = res;
    });

---

你能提供一个StackBlitz吗？它工作得很好，有一个小问题，为什么在reportItems中，我将anywhere SavingAppentialPercent设置为0，那么管道不会向我返回任何东西，因为我将它设置为1，在某个地方它不会返回任何问题1。在你的例子中，与我将一个站点的reportItems设置为0的情况相同，它不会返回任何东西。