javascript - 显示的 Angular Bootstrap 进度条进度不正确

Question

我在外部窗口上运行一系列模拟，每次模拟完成后，我都会在主窗口上增加一个进度值(一切都通过 IPC 通信发生)。

整个机制运行良好，进度条上方和内部的 View 是正确的，而进度条本身显示丑陋的百分比区域。

以此为例(真实案例截图):

指令是:

<uib-progressbar ng-if="typeof(progressMax) !== 'string'" 
  class="progress-striped danger" 
  max="100" 
  value="progress*100/progressMax" 
  type="danger">
    <i>{{progress}} / {{progressMax}} ({{progress*100/progressMax}}%)</i>
</uib-progressbar>

progressMax 值在按下按钮时设置(因此，当显示进度条时)，进度从 0 开始并达到 progressMax。

如视频中所示，转换正确完成，但显然，进度条显示的好像是 90/1000 而不是 90/100。

我在一个使用 Webpack 和 AngularJS(和 Babel)的 ElectronJS 项目上运行它，不确定这是否相关。

我已经检查过其他类似的 Bootstrap 问题，但到目前为止没有一个对我有帮助(另外，设置 max="progressMax" 也不起作用并重现了同样的问题)。

Answer 1

我发现了问题。

实际上没有任何代码相关:我的代码是正确的。

问题是 {{progress}} 更新得太快，所以 View 没有足够的时间来处理和更新数据。

类似地，如果您完成一个进度条并且在短时间后将其进度设置为 0，则可能会遇到另一个错误:您会看到进度条倒退(从 100 到 0)，并且最终会当 {{progress}} 达到当前栏状态时再次前进。

解决方案，简而言之，就是彻底改变数据收集率:我没有频繁增加进度值，而是将我的主线程设置为仅发送 100 个数据包的集合，这样进度增加就更慢了，因此， View 将有足够的时间进行更新。