在 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);
}

在 html 中通过 ngfor 向在 TypeScript 中声明的变量添加值

Add value to variable declared in TypeScript by ngfor in html

html

angular

typescript

ngfor