Javascript 与绑定进度函数一起使用时，角度引导进度栏不更新

我正在将一个文件上载到和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!";

    });
}

progress handler函数是一个简单的函数，它只更新uploadProgress变量，如下所示：

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

我使用的是一个有角度的ng引导进度条，如下所示：

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

---

有人知道为什么组件没有更新吗？我想这是一个奇怪的绑定问题。。。提前感谢。

在ts中使用Bootstrap progress和create函数来计算完成百分比

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

---

可能进程回调函数

handler

被调用了，您可以在

NgZone

回调中更新

uploadProgress

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

NgZone

实例

constructor (private zone: NgZone) { }

然后像这样在

处理程序

函数中更新您的

上载进程

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

尝试使用NgZone“”

---

@Kousic这是为角度而不是角度而设计的

constructor (private zone: NgZone) { }

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

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