Angular - 顯示來自 HTML 中的 2 個 JSON 的數據

Question

我無法在 Angular 中顯示來自 2 個互連的 JSON 的數據。

第一個 JSON：

member = [
  { id: 1, name: 'shinta'},
  { id: 2, name: 'rahma'},
  { id: 3, name: 'john'}
]

第二個 JSON：

nest = [
  {id: 1, amount: 2000, userid: 1},
  {id: 2, amount: 3000, userid: 2}, 
  {id: 3, amount: 5000, userid: 2},
  {id: 4, amount: 1500, userid: 1},
  {id: 5, amount: 2200, userid: 1},
  {id: 6, amount: 12500, userid: 1},
  {id: 7, amount: 7000, userid: 2}, 
  {id: 8, amount: 8300, userid: 3}, 
  {id: 9, amount: 2800, userid: 3},
  {id: 10, amount: 9500, userid: 3}
]

如何查看/綁定 HTML 中的數據？

<ul *ngFor="let item of memberData, let i = index">
  <li>{{ item.name }} <span>*this to view sum of user amount*</span></li>
</ul>

請指導我解決這個問題。 謝謝你。

Answer 1

1. 使用.map()創建新數組：

• members的重復 object 元素（通過...x ）
• 新字段： totalAmount和 .reduce .reduce()來執行匯總。

this.memberData = this.member.map((x) => ({
  ...x,
  totalAmount: this.nest
    .filter((y) => y.userid == x.id)
    .reduce((total: number, current) => (total += current.amount), 0),
}));

<ul *ngFor="let item of memberData; let i = index">
  <li>
    {{ item.name }} <span>{{ item.totalAmount }}</span>
  </li>
</ul>

StackBlitz 上的演示