Angular 2实时进度栏 [英] Angular 2 real time progress bar
问题描述
在Angular 2应用程序中，我订阅了一个简单的服务，用于从远程数据库中获取数据并将其显示在表视图中.一切正常，现在我想添加一个进度条，以显示从服务器获取数据的实时进度. 我目前正在使用 primeng progressbar 组件来显示进度.但是只能提供固定的时间来显示进度，如下面的代码所示，
In my Angular 2 application, I have subscribed to a simple service to fetch data from a remote database and display them in a table view. Everything works fine and now I want to add a progress bar to show the real time progress for data fetching from the server. I am currently using primeng progressbar component for showing the progress. But It can only be provided a fixed time to display the progress as in the code below,
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表示进度条显示的时间(以毫秒为单位). 但是我不需要的是，我需要首先显示进度条，并动态，实时地填充进度条，直到完成实际数据提取为止.进度条应仅在数据获取完成之后并且在将数据呈现到表视图之前完成，并且是不可见的.
2000 means the time (in milliseconds) the progressbar is showing. But what I need is not this, I need to display the progress bar initially and fill the progress bar dynamically and real time until the actual data fetch completed. Progress bar should be completed and invisible only after the data fetch complete and just before data rendered to the table view.
除了为进度条提供静态时间以外，是否还有其他逻辑可以做到?除了 primeng 之外，其他任何解决方案都可以使用.
Is there any logic to do it other than providing the static time for the progress bar? Any other solutions other than primeng are welcome.
谢谢.
更新:
我的服务等级，
@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事件.这样可以获取有关下载进度的提示.
You could leverage the onprogress event provided by XHR. This allows to get hints about the progress of the download.
Angular2不支持此功能，但是您可以通过扩展BrowserXhr类将其插入:
This isn't supported out of the box by Angular2 but you can plug it by extended the BrowserXhr class:
@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提供程序:
and override the BrowserXhr provider with the extended:
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观察栏上进行订阅.后者将允许您更新进度条.请求完成后(在地图或订阅回调中)，您可以关闭进度栏.
When you start to get data, you can display your progress bar and subscribe on the progressEventObservable observable. The latter will allow you to update the progress bar. When the request complete (in a map or subscribe callback), you can close the progress bar.
以下是示例:
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实时进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
