The user interface is not updated automatically when a value is available from the observed

Question

In angular2, I create an observable _uploadProgressStatus that accepts numbers. Using the async channel, I want to display the number in the user interface and automatically update when new values ​​are entered. Pls refers to the codes below.

home.component.ts observes data from 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); }); } 

The problem I am facing is the numbers are no problem, but the user interface is not updated. However, whenever I click on <h4> , the correct values ​​are displayed. It just does not update automatically. Any idea?