使用绑定进度功能时，Angular Bootstrap Progressbar 不会更新

Question

我正在将文件上传到 IPFS 节点，该节点使用进度函数来处理更新。正如你所看到的，我绑定这给处理函数，以便它可以访问所有必需的变量

//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>

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

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

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

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

任何人都知道为什么组件没有更新？我认为这是一些奇怪的绑定问题......提前致谢。

Answer 1

也许进度回调函数handler是在角度之外调用的，您可以uploadProgress在NgZone回调中更新。

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

constructor (private zone: NgZone) { }

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

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