Question

我有一个对象，需要在其中显示名称。以及每个人的总费用金额。

我可以使用ngfor显示姓名。

但是如何显示各个金额的总和。像约翰一样，它应该显示50，而史蒂夫它应该显示170。

任何人都可以帮我怎么做。

data = [
  {
    'id'  : 1,
    'name': john,
    'expenselist' = [
      {
        'expenseid': 1,
        'amount'   : 20
      },
      {
        'expenseid': 2,
        'amount'   : 30
      },
    ]
  },
  {
    'id'  : 2,
    'name': steve,
    'expenselist' = [
      {
        'expenseid': 1,
        'amount'   : 80
      },
      {
        'expenseid': 2,
        'amount'   : 90
      },
    ]
  }
]

<ion-label *ngFor="let data of data;">
    {{data.name}}: 
    Total Expense Amount:
</ion-label>

Answer 1

我不知道如何使用ngfor。但这是我在普通JavaScript中的处理方式，希望它能给您一个提示。

data.forEach(person => {
 console.log(person.name)
 expense_amount = 0
 person.expenselist.forEach(expense => {
  expense_amout = expense_amount + expense.mount
  });
 console.log(expense_amount);
});

Answer 2

尝试创建一个函数来获取总费用金额，它将起作用。

在HTML中，

  <div *ngFor="let person of data;">
      {{person.name}} : Total Expense Amount : {{getTotalExpenseAmount(person)}}
  </div>

在ts文件中，添加此功能

getTotalExpenseAmount(data) {
    return data.expenselist.reduce(
      (total, current) => total + current.amount,
      0
    );
  }

Answer 3

使用减少

const mutatedData = data.reduce((acc, value)=>{
    acc.push({
        name: value.name,
        amount: value.expenselist.reduce((acc, value)=>acc+value.amount, 0)
    })
}, [])

在角度代码中使用mutatedData产生结果

<ion-label *ngFor="let data of mutatedData;">
  {{data.name}}  : 
  Total Expense Amount : {{data.amount}}
</ion-label>

如何计算和显示javascript对象的字段总和

3 个答案: