Question

我是Angular的新手，正在寻找如何完成这项工作的答案。我正在使用Angular 2.

我正在尝试计算给定响应对象的年收入。所以我正在制作和http请求从API获取数据。以下是回复机构：

{
 "accountName": "SHELL TRADING SERVICES CO",
 "wbsList": [
{
  "wbsId": "W1MLR",
  "monthlyFindata": [
    {
      "year": "2016",
      "month": "Jan",
      "quarter": "Q1",
      "revenue": "16988.09",
      "cost": "15049.85",
      "gp": ""
    },
    {
      "year": "2017",
      "month": "Jan",
      "quarter": "Q1",
      "revenue": "0.00",
      "cost": "0.00",
      "gp": ""
    },
    {
      "year": "2016",
      "month": "Apr",
      "quarter": "Q2",
      "revenue": "13567.20",
      "cost": "9158.94",
      "gp": ""
    },
    {
      "year": "2017",
      "month": "Apr",
      "quarter": "Q2",
      "revenue": "0.00",
      "cost": "0.00",
      "gp": ""
    },
  ],
  "quarterlyFindata": [
    {
      "year": "2016",
      "quarter": "1Q",
      "revenue": "57845.24",
      "cost": "47308.82",
      "gp": "",
      "gpPercentage": "0.182148436068"
    },

我需要循环访问数据并计算每年的年收入。 2016,2017,2018等。然后得到结果并将其显示在表格中。我知道这是我在table.component.ts中的逻辑错误。

以下是我正在处理的文件片段：

table.component.html

<div class="bs-component">
<table class="table table-striped table-hover ">
<thead>
    <tr>
    <th></th>
    <th>GP%</th>
    <th>QP</th>
    <th>Rev</th>
    <th>Cost</th>
    </tr>
</thead>
<tbody>
    <tr>
    <tr class="active">
    <td></td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
    <td>Column content</td>
    </tr>

finsummary.service.ts

postFinSummary(){
    let body = {
    "accountName": "SHELL TRADING SERVICES CO",
    "currentYear": "2017",
    "wbsList": [
        "W1MLR"
        ]
}

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Headers', 'Content-Type');
headers.append('Access-Control-Allow-Origin', 'Content-Type');

let options = new RequestOptions({headers: headers});
    return this._http.post(this._url, body, options)
    .map((response: Response) => response.json());
 }

table.component.ts

export class TablesComponent implements OnInit {
    showTables: boolean;
    wbsArray =[];
    q1RevDatavArray = [];
    currentYear = '2017';
    previousYear = '2016';
    q1Rev: number = 0;
    q2Rev: number;
    q4Rev: number;

    constructor(private _finSummaryService: FinsummaryService, ){
        this._finSummaryService.postFinSummary().subscribe(
        wbssList => {
            console.log(wbssList);

            for(var i=0; i<wbssList.wbsList.length; i++) {
            this.wbsArray[this.wbsArray.length] = wbssList.wbsList[i].wbsId;
            for(var z=0; z<wbssList.wbsList[i].monthlyFindata.length; z++){
            let sum = 0;
            if(wbssList.wbsList[i].monthlyFindata.year == this.currentYear && 
                wbssList.wbsList[i].monthlyFindata.qaurter == '1Q' ) {
                this.q1RevDatavArray[this.q1RevDatavArray.length] = w 
                bssList.wbsList[i].monthlyFindata.rev;
                sum += this.q1RevDatavArray[i];
                console.log(sum);
            }
        }
    }
});

Answer 1

您可以使用数组的reduce方法

this.yearStats = this.data.reduce((stats, month) => {
  if (!stats[month.year]) {
    stats[month.year] = { revenue: 0, cost: 0 }
  }
  stats[month.year].revenue = stats[month.year].revenue + parseFloat(month.revenue)
  stats[month.year].cost = stats[month.year].cost + parseFloat(month.cost)
  return stats;
}, {})

并将其显示在带插值的表格中

<table>
  <tr>
    <th>Year</th>
    <th>Revenue</th>
    <th>Cost</th>
  </tr>
  <tr *ngFor="let year of years">
    <td>{{year}}</td>
    <td>{{yearStats[year].revenue}}</td>
    <td>{{yearStats[year].cost}}</td>
  </tr>
</table>

Live plunker example

如何遍历一组对象并计算每年的年收入并使用Angular 2将其显示在表中？

1 个答案: