我想在用户上传文件时显示进度条的进度,根据this question 。这是我的代码:
服务:
public makeFileRequest(url: string, files: File): Observable<Models.MalFile> {
return Observable.create ((Observable) => {
var formData: any = new FormData();
var xhr = new XMLHttpRequest();
console.log(files[0]);
// for(var i = 0; i < files.length; i++) {
formData.append("file", files[0], files[0].name);
// }
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
Observable.next(JSON.parse(xhr.response));
Observable.complete();
} else {
Observable.error(xhr.response);
alert(xhr.response);
}
}
}
xhr.upload.onprogress = (event) => {
this.progress = Math.round( event.loaded / event.total * 100);
this.progressObserver.next(this.progress);
}
xhr.open("POST", url, true);
xhr.send(formData);
});
}
和我的组件:
ngOnInit() {
this.service.progress.subscribe(
data => {
this.loadedData = data;
console.log("data:",this.loadedData);
//this.loadedData.bind(data) ;
},
(error) => {
console.log('Could not to upload file');
},
() => {
// this.loadedData = 100;
}
)}
我想将 loadedData
绑定(bind)到进度条 View ,但此时我在控制台中记录进度:
我的问题是:
将 Observable 对象绑定(bind)到 View 中的进度条值:
<div class="progress" style="">
<progress dir="ltr" class="progress progress-success active progress-striped progress-animated" value="{{loadedData}}" max="100"> </progress>
</div>
此代码仅在上传完成(100%)时显示进度条!
如何将 loadedData
绑定(bind)到进度条值?
最佳答案
我假设 this.loadedData
获取了您想要的正确数据。然后执行以下操作,
<div class="progress" style="">
<progress dir="ltr"
class="progress progress-success active progress-striped progress-animated"
value="loadedData" //<<<===removed {{ }} curly braces.
max="100">
</progress>
</div>
关于javascript - 更新上传文件 Angular 2 上的引导进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39932788/