將值添加到html中ngfor在TypeScript中聲明的變量

Question

我在ts文件和html文件中聲明了變量，而我正在使用ngfor，我需要增加ngfor中每個元素在ts中聲明的變量，是否可能？

<tbody>
  <tr *ngFor="let item of invoiceItems">
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemNetPrice}}</td>
    <td>{{item.ItemAmount}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemVATRate}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    {{netto += item.ItemNetPrice}}
  </tr>
</tbody>

netto是我的變量

Answer 1

如下更改您的html

    <div *ngFor ="let item of invoiceItems; let i = index">
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemNetPrice}}</td>
    <td>{{item.ItemAmount}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemVATRate}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    <td>{{item.ItemName}}</td>
    {{getTotal(i)}}
     </div>

並在打字稿文件中創建getTotal方法，如下所示

getTotal(i) {
return this.invoiceItems.slice(0,i +1).map(rec => rec. ItemNetPrice).reduce((prev, curr) => prev + curr, 0);
}