La interfaz de usuario no se actualiza automáticamente cuando el valor está disponible desde el observable
En angular2, creo el _uploadProgressStatus observable, que toma en números. Utilizando una tubería asíncrona, quiero mostrar el número en la interfaz de usuario y actualizarlo automáticamente cuando se introducen nuevos valores. Consulte los códigos a continuación.
home.component.ts está observando los datos de 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);
});
}
El problema que encuentro es que los números entran sin problemas, pero la interfaz de usuario no se actualiza. Sin embargo, cada vez que hago clic en el<h4>
, se muestran los valores correctos. Simplemente no se actualiza automáticamente allí. ¿Alguna idea?