如何从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' />