Прогрессбар Angular Bootstrap не обновляется при использовании с функцией связывания прогресса - PullRequest
Новая
       7

Прогрессбар Angular Bootstrap не обновляется при использовании с функцией связывания прогресса

0 голосов
/ 23 января 2019

Я загружаю файл на узел IPFS, который использует функцию прогресса для обработки обновлений.Как вы можете видеть, я связал this с функцией обработчика, чтобы он мог обращаться ко всем необходимым переменным 

//This method controls uploading the waveform to IPFS
uploadWaveform()
{
    this.ipfs.files.add(buf, {progress:this.handler.bind(this)})
      .then((result) => {
          console.log("All done!");
          this.progressText = "All Done!";

    });
}

Функция обработчика прогресса - это простая функция, которая просто обновляет переменную uploadProgress ивыглядит так: 

handler (p) {    
  this.uploadProgress = Math.round(100*p/this.fileSize);      
}

Я использую угловую индикаторную строку ng-bootstrap примерно так: 

<ngb-progressbar [value]="uploadProgress">
  <i>{{progressText}}</i>
</ngb-progressbar>

Когда я загружаю файл, он загружается правильно, и функция прогресса работает корректно.

Однако переменная uploadProgess не обновляется в индикаторе выполнения ng-bootstrap.Если я щелкну где-нибудь внутри приложения, оно обновит значение, но не раньше.

Я знаю, что оно на самом деле обновляется внутри компонента, потому что если я поставлю тайм-аут, чтобы вывести значение progressText через 5 секундпосле завершения загрузки оно отражает обновленное значение! 

      setTimeout(() => {
        console.log("this.progressText = " + this.progressText);
      }, 5000);

У кого-нибудь есть идеи, почему компонент не обновляется?Я предполагаю, что это какая-то странная проблема с привязкой ... Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

возможно, функция обратного вызова хода выполнения handler вызывается вне угла, вы можете обновить uploadProgress в NgZone функции обратного вызова.

Сначала добавьте NgZone экземпляр в конструктор вашего компонента 

constructor (private zone: NgZone) { }

И затем измените ваш uploadProgesss в функции handler следующим образом 

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}
0 голосов
/ 06 февраля 2019

Попробуйте использовать NgZone 'https://dzone.com/articles/understanding-ngzone'

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}
0 голосов
/ 01 февраля 2019

Используйте прогресс Bootstrap с созданием функции в ts для вычисления процента выполнения. 

  <div ngClass="progress">
    <div ngClass="progress-bar progress-bar-success" 
         role="progressbar" aria-valuemin="0" aria-valuemax="100" [style.width]="getPercentage()+'%'" >
      <div class="pl-2">{{getPercentage()}} %</div>
    </div>
  </div>

функция в компоненте должна иметь значение процента выполнения.Если когда-либо произойдет какое-либо обновление в коде, angular перезагрузит функцию, чтобы получить обновленное значение. 

complete=0
 getPercentage() {
return Math.round(100*this.complete/this.fileSize);    
}
...