Question

在angular2中，我创建了可观察的_uploadProgressStatus，它接收数字。使用异步管道，我想在UI上显示数字，并在启动新值时自动更新。请参阅下面的代码。

home.component.ts正在观察来自upload.service.ts的数据

public  _uploadProgressStatus:Observable<number>;

this._uploadProgressStatus = this._uploadService._progress$;

home.component.html

<div *ngIf="_startUploadFlag" class="container">
  <h4>Uploading...{{_uploadProgressStatus | async | percent}}</h4>
</div>

upload.service.ts

 uploadVideo(file:File):Promise<Video> {
    return new Promise((resolve, reject) => {
      let formData: FormData = new FormData(),
       authenCode = this._authenservice.authenticate(),
        xhr: XMLHttpRequest = new XMLHttpRequest();
      console.log('getVideos:authenCode is' + authenCode);
      let path = this._configurationService.getAPI('API_VIDEOMANAGEMENT_UPLOAD');
      console.log('upload video to:' + path);
      xhr.open('POST', path, true);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.setRequestHeader('Content-Type', 'multipart/form-data');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log('xhr status 200');
            resolve(<Video>JSON.parse(xhr.response));
          } else {
            console.log('xhr status rejected:'+xhr.status);
            reject(xhr.response);
          }
        }
      };
      xhr.upload.onprogress = (event) => {
        this._progress = Math.round(event.loaded / event.total * 100);
        console.log('inside of xhr.upload.onprogress:'+ this._progress);
        this._progressObserver.next(this._progress/100);
      };
      formData.append("file", file, file.name);
      xhr.send(formData);
    });
  }

我遇到的问题是数字没有问题，但UI没有更新。但是，每当我单击<h4>时，都会显示正确的值。只是不自动更新那里。有什么想法吗？

当可从observable获得值时，UI不会自动更新

0 个答案: