如何從Javascript / Typescript中的數組對象計算運行總計並使用HTML在每個實例中顯示輸出？

Question

我正在研究MEAN堆棧項目，並且有一個看起來像這樣的數組：

savings: any = [300, 450, 350, 500]

我也有一個名為Savings_bf的變量，它是從數據庫中帶出的儲蓄值，其值如下。

savings_bf = 15000 

我想用打字稿寫一些代碼來獲取運行總計，將Savings_bf納入計算中，並用HTML顯示輸出。

如我所說，這是使用Typescript 3.5.3的MEAN堆棧應用程序。 輸出在控制台上按預期工作，但是問題是在前端復制了輸出。

我到目前為止的代碼是：

this._savings_total = +this.savings.reduce((result, a) => {
            var savings_amount = a.savings_amount;
            return result + savings_amount;
          }, this.savings_bf);

，並以html格式顯示輸出；

<p>{{_savings_amount}}</p>

預期的HTML輸出應為：

15300,15750,16100,16600,
but the actual output is the final value 16600

Answer 1

代碼中的問題是您在每次迭代中都覆蓋了this_savings_bf的值，您應該簡單地映射這些值並使用變量來跟蹤最后的添加值

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let temp = savings_bf let final = savings.map(v => temp += v) console.log(final) 

或者，您可以在每次迭代中簡單地使用forEach構建html字符串，並在循環結束時添加到所需位置

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let html = '' savings.forEach(v=>{ savings_bf += v html += `<p>${savings_bf}</p>` }) document.getElementById('test').innerHTML = html 

 <div id='test'/> 

---

如果我打算讓輸出以Savings_bf的初始值開頭怎么辦

 let savings = [300, 450, 350, 500] let savings_bf = 15000 let html = '' savings.forEach(v => { html += `<p>${savings_bf}</p>` savings_bf += v }) html += `<p>${savings_bf}</p>` document.getElementById('test').innerHTML = html 

 <div id='test' />