Angular 6 View 不更新，即使使用 ChangeDetectorRef、ngZone 和 requestAnimationFrame

Question

在我的 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 的值

接下来我到底应该尝试什么？

Answer 1

众所周知，Javascript 是单线程的。如果你执行繁重的计算，你的主线程将被阻塞并且在它完成之前不会被释放。也许您可以尝试使用 Observables，异步操作浏览器将根据优先级处理它。

组件:

convertedPercent$ = new Subject<any>();
convertedPercent$.next(this.convertedPercent);

模板:

<p>Conversion is  {{ convertedPercent$ | async }}% complete</p>