在我的 Angular 2 应用程序中,我订阅了一个简单的服务来从远程数据库获取数据并将它们显示在 TableView 中。一切正常,现在我想添加一个进度条来显示从服务器获取数据的实时进度。 我目前正在使用 primeng progressbar用于显示进度的组件。但是只能提供一个固定的时间显示进度,如下代码,
ngOnInit() {
let interval = setInterval(() => {
this.value = this.value + Math.floor(Math.random() * 10) + 1;
if(this.value >= 100) {
this.value = 100;
this.msgs = [{severity: 'info', summary: 'Success', detail: 'Process Completed'}];
clearInterval(interval);
}
}, 2000);
}
2000 表示进度条显示的时间(以毫秒为单位)。 但我需要的不是这个,我需要先显示进度条,然后动态实时填充进度条,直到真正的数据获取完成。只有在数据获取完成后和数据呈现到 TableView 之前,进度条才应该完成并且不可见。
除了为进度条提供静态时间之外,是否有任何逻辑可以做到这一点?欢迎使用 primengem> 以外的任何其他解决方案。
提前致谢。
更新:
我的服务等级,
@Injectable()
export class MyService {
constructor(public http:Http) {
}
search(criteria:SearchObject):Observable<ResponseObject>{
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post(URL,JSON.stringify(criteria),options)
.map(res => res.json())
}
我的组件类,
export class SearchComponent{
var response;
constructor(public myService:MyService) {
}
search(): void {
//Need to show the progress bar here
var criteria = new SearchObject();
//set data to the criteria object
this.myService.search(criteria)
.subscribe(
data => {
this.response = data;;
},
);
//close the progress bar after completing communicating with server
}
最佳答案
您可以利用 XHR 提供的 onprogress
事件。这允许获得有关下载进度的提示。
Angular2 不支持开箱即用,但您可以通过扩展 BrowserXhr
类来插入它:
@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
constructor(private service:ProgressService) {}
build(): any {
let xhr = super.build();
xhr.onprogress = (event) => {
service.progressEventObservable.next(event);
};
return <any>(xhr);
}
}
并使用扩展覆盖 BrowserXhr
提供程序:
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);
ProgressService
类可能如下所示:
export class ProgressService {
progressEventObservable:Subject<any> = new Subject();
}
查看此插件:http://plnkr.co/edit/8MDO2GsCGiOJd2y2XbQk?p=preview .
编辑
当您开始获取数据时,您可以显示进度条并订阅 progressEventObservable
可观察对象。后者将允许您更新进度条。当请求完成时(在 map 或订阅回调中),您可以关闭进度条。
这是一个示例:
fetchData() {
// Display progress bar
// ...
let subscription = this.progressService.progressEventObservable.subscribe(
(event) => {
// Update progress bar
// ...
}
);
return this.http.get('...')
.map(res => {
// Hide progress bar
// ...
// Unsubscribe
subscription.unsubscribe();
return res.json();
});
}
关于Angular 2实时进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37609472/