在我的 component.ts 中,我有一个将 WAV 音频数据转换为 MP3 的循环:
for (var i = 0; i < samples.length; i += sampleBlockSize) {
let sampleChunk = samples.subarray(i, i + sampleBlockSize);
var mp3buf = mp3encoder.encodeBuffer(sampleChunk);
if (mp3buf.length > 0) {
mp3Data.push(mp3buf);
}
this.convertedPercent = Math.floor( ( i / samples.length ) * 100);
console.log('convertedPercent: ' + this.convertedPercent);
}
console.log('This is where the HTML view jumps from 0% to 100%');
在我的 component.html 中,我有代码显示到目前为止已转换的音频百分比:
<p>Conversion is {{ convertedPercent }}% complete</p>
在转换过程中,它会将正确的转换百分比实时记录到控制台,但 View 仍停留在 0% 完成状态。一旦循环结束,它会立即跳到 100%。
我试过:
this.cd.detectChanges();
- 在
zone.run()
中包装改变convertedPercent
值的行 - 在
requestAnimationFrame()
中换行更改convertedPercent
的值
接下来我到底应该尝试什么?
最佳答案
众所周知,Javascript 是单线程的。如果你执行繁重的计算,你的主线程将被阻塞并且在它完成之前不会被释放。也许您可以尝试使用 Observables,异步操作浏览器将根据优先级处理它。
组件:
convertedPercent$ = new Subject<any>();
convertedPercent$.next(this.convertedPercent);
模板:
<p>Conversion is {{ convertedPercent$ | async }}% complete</p>
关于Angular 6 View 不更新,即使使用 ChangeDetectorRef、ngZone 和 requestAnimationFrame,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53236491/