Question

我正在使用以下代码从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的帮助下，我循环检索数据并按以下方式在页面上显示：

serviceType
pricingUnit
towerType
savingPotentialPercent
SavingAmount

我想从具有最高SavingPotentialPercent值的元素的reportItems中检索值SavingPotentialPercent和SavingAmount。

最好是可以在组件的html文件本身中完成。我可以通过多种方式组合，但是我无法处理它：(目前，数据是从json文件下载的，最后它们将从数据库中检索并返回json。

Answer 1

您可以根据需要创建管道

perSecond()

在您的HTML中

 @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];
      }
    }

演示https://stackblitz.com/edit/angular-max-pipe-2

Answer 2

尝试：

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

Answer 3

您可以通过这种方式打印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>

Answer 4

我认为您应该这样做：

    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;
    });

角度-表格中的最大值

4 个答案: