Angular Bootstrap 使用绑定进度函数时进度条不更新

Question

我正在将文件上传到 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);      
}

我正在使用 angular ng-bootstrap 进度条，如下所示：

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

当我上传文件时，它上传正确并且进度功能正常工作。

但是，在 ng-bootstrap 进度条中 uploadProgess 变量没有更新。如果我单击应用程序内的任意位置，将更新该值，但不会在此之前。

我知道它实际上是在组件内部更新的，因为如果我设置超时以在上传完成 5 秒后打印出 progressText 的值，它会反映更新后的值！

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

有人知道为什么组件没有更新吗？我认为这是一些奇怪的绑定问题...在此先感谢。

Answer 1

使用 Bootstrap progress 在 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);    
}

Answer 2

可能angular调用了进度回调函数handler，可以在NgZone回调中更新uploadProgress。

首先在组件的构造函数中注入 NgZone 实例

constructor (private zone: NgZone) { }

然后像这样在 handler 函数中更新你的 uploadProgesss

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}

Answer 3

尝试使用 NgZone 'https://dzone.com/articles/understanding-ngzone'

handler (p) {
  this.zone.run(() => {
    this.uploadProgress = Math.round(100.0 * p / this.fileSize);
  });
}

Angular Bootstrap 使用绑定进度函数时进度条不更新

Angular Bootstrap Progressbar not updating when using with binded progress function

javascript

ng-bootstrap

angular