javascript - 如何在 typescript 中对数组内的总价格求和并在 Angular 7中调用它

Question

我知道对此有很多问题，但很难找到可以实现它的答案。我想创建一个求和价格的函数，但每次我尝试使用循环时，它总是给我 length property undefined

我尝试过一些主题，但仍然失败:

sum-of-object-properties-within-an-array

how-to-get-nested-array-length-in-javascript

how-to-get-sum-from-array-using-javascript

cannot-read-property-length-of-undefined-angular-7

这是我的ts:

  allUnpaidTeam: []; //this is a variabel to store all my Json in my array

  formatPrice(value) {
    let val = (value/1)
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
  }

  totalPrice() {
    let total = 0;
    for(let data of this.allUnpaidTeam){
      for(let datas of data.contest){
        let sum = datas.pricePerStudent * data.memberPerTeam;
        total+= sum;
      }
    }
    return this.formatPrice(total);
  }

这是数组 json 的示例:

{
  "teams": [
    {
      "student": [
        {
          "team": null,
          "_id": "5d4e891cff5e00c9d5c28af9",
          "name": "John Swasneger",
          "email": "john.s@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        }
      ],
      "isPaid": false,
      "_id": "5d4e8aadff5e00c9d5c28afd",
      "name": "Team Garda Frosh",
      "contest": {
        "registrationStatus": "open",
        "_id": "5d4d8b19966460a59986e13c",
        "name": "Pizza Hunt",
        "memberPerTeam": 1,
        "maxTeam": 300,
        "pricePerStudent": 185000,
        "__v": 0
      },
      "school": "5d4e3e258311a9c3d43569d5",
      "__v": 0
    },
    {
      "student": [
        {
          "team": "5d4ebcd3af8eacd1a2317bfa",
          "_id": "5d4ebc19af8eacd1a2317bf7",
          "name": "lala",
          "email": "lala@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        },
        {
          "team": "5d4ebcd3af8eacd1a2317bfa",
          "_id": "5d4ebc35af8eacd1a2317bf8",
          "name": "lulu",
          "email": "lulu@gmail.com",
          "phone": "098778900987",
          "school": "5d4e3e258311a9c3d43569d5",
          "__v": 0
        }
      ],
      "isPaid": false,
      "_id": "5d4ebcd3af8eacd1a2317bfa",
      "name": "Team Landing Safe",
      "contest": {
        "registrationStatus": "open",
        "_id": "5d4d8b1a966460a59986e13d",
        "name": "burger knight",
        "memberPerTeam": 2,
        "maxTeam": 151,
        "pricePerStudent": 185000,
        "__v": 0
      },
      "school": "5d4e3e258311a9c3d43569d5",
      "__v": 0
    }
  ]
}

这是我的 html:

              <mat-grid-list class="section-title" cols="4" rowHeight="40px">
                <mat-grid-tile><div class="table-text name last">Total</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text-title">&nbsp;</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text-title">&nbsp;</div></mat-grid-tile>
                <mat-grid-tile><div class="table-text price last">$ {{totalPrice()}}</div></mat-grid-tile>
              </mat-grid-list>

有人可以帮我解决这个问题吗？

Answer 1

您可以使用reduce，对每个值评估一个函数，并且每次执行都应该返回一个新的小计。

在你的情况下会是这样的:(抱歉格式化，我现在正在使用手机)

totalPrice() =>
 this.allUnpaidTeam.reduce((subtotal, item) => subtotal + item.contest.pricePerStudent * item.contest.memberPerTeam,0)