将值添加到html中ngfor在TypeScript中声明的变量

时间:2019-05-01 15:11:16

标签: html angular typescript ngfor

我在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是我的变量

1 个答案:

答案 0 :(得分: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);
}