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

我对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.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>

表3.1.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);
            }
        }
    }
});

导出类tableComponent实现OnInit{
显示表：布尔值；
wbsArray=[]；
q1RevDatavArray=[]；
本年度='2017'；
上一年度='2016'；
q1Rev：编号=0；
q2Rev：编号；
q4Rev：编号；
构造函数（私有_finSummaryService:finSummaryService，）{
此.\u finSummaryService.postFinSummary（）.subscribe(
wbssList=>{
控制台日志（wbssList）；
对于（var i=0；i您可以使用数组的方法

this.yearStats=this.data.reduce（（stats，month）=>{
如果（！stats[月.年]）{
统计数据[月.年]={收入：0，成本：0}
}
统计数据[month.year]。收入=统计数据[month.year]。收入+parseFloat（month.revenue）
统计数据[month.year]。成本=统计数据[month.year]。成本+浮动（month.cost）
返回统计；
}, {})

并以插值方式显示在表格中


年
收入
成本
{{year}
{{yearStats[year].revenue}
{{yearStats[year].cost}


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