Представление Angular 6 не обновляется, даже с 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>

Пока происходит преобразование, в реальном времени регистрируется правильный процент конверсии для консоли , однако представление остается застрявшим на 0% завершения. Как только цикл заканчивается, он мгновенно скачет до 100%.

Я пытался:

• this.cd.detectChanges();
• перенос строки, которая изменяет значение convertedPercent в zone.run()
• перенос строки, которая изменяет значение convertedPercent в requestAnimationFrame()

Что, черт возьми, я должен попробовать дальше?

Answer 1

Как мы знаем, Javascript является однопоточным. Если вы выполняете тяжелые вычисления, ваш основной поток будет заблокирован и не будет освобожден до его завершения. Может быть, вы можете попробовать с Observables, если браузер асинхронной операции будет обрабатывать его в соответствии с приоритетом.

Компонент:

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

Шаблон:

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