在Angular 2中的每個ngFor之後計算和存儲數據

我正在創建一個事務跟蹤器作爲MEAN項目並且卡在這裏。我需要使用ngFor顯示所有事務。我想在每次交易後顯示信用和借方金額與以前餘額的差額。任何想法如何做到這一點？在Angular 2中的每個ngFor之後計算和存儲數據

這是我的ngFor代碼。

<tbody> 
    <tr *ngFor="let trans of transactions; index as i;"> 
     <td>{{ trans.date | date:'dd-MM-yyyy'}}</td> 
     <td>{{ trans.billNo }}</td> 
     <td>{{ trans.description }}</td> 
     <td>{{ trans.creditAmt }}</td> 
     <td>{{ trans.debitAmt }}</td> 
     <td>{{ trans.debitAmt + trans.creditAmt + (DONT KNOW HOW TO ADD THE PREVIOUS BALANCE)}} </td> 
    </tr> 
    </tbody>

在我的表，現在你可以看到，平衡沒有被正確地計算。我該怎麼做？如何在每個ngFor迭代之後保存平衡並顯示它？我的邏輯似乎沒有任何工作。

來源

2017-07-28 Hisham Mubarak

我嘗試在Typescript文件中創建一個名爲balanceAmount的變量，並調用ngFor餘額列中的方法，並添加信用和借方金額，然後將balanceAmount指定給結果並返回balanceAmount。然後當我覆蓋balanceAmount時，我得到一個錯誤，它會刷新並進入無限循環。錯誤：ExpressionChangedAfterItHasBeenCheckedError –

在填充表格之前，我會計算類中數組中的所有內容。 .. – Vega

我給你一個答案，但我同意@Vega – wesside

<tbody> <tr *ngFor="let trans of transactions; index as i;"> <td>{{ trans.date | date:'dd-MM-yyyy'}}</td> <td>{{ trans.billNo }}</td> <td>{{ trans.description }}</td> <td>{{ trans.creditAmt }}</td> <td>{{ trans.debitAmt }}</td> <td>{{ trans.debitAmt + + (DONT KNOW HOW TO ADD THE PREVIOUS BALANCE)}} </td> </tr> </tbody>

那麼，你必須索引。如果i != 0 ..

(trans.creditAmt - trans.debitAmt) + (transactions[i - 1].debitAmt + trasnactions[i - 1].creditAmt)

你應該這樣做的部分，雖然。因爲您需要創建一個變量來跟蹤以前的餘額，因爲它也是一個計算。

來源

2017-07-28 18:55:34 wesside

哇！從來不知道我可以在這個索引i的插值內做這麼多的計算。謝謝。我現在正在嘗試像維加建議的東西，謝謝你的幫助。 –

在Angular 2中的每個ngFor之後計算和存儲數據

回答

相關問題