Question

在我的Angular 2应用程序中，我订阅了一个简单的服务来从远程数据库获取数据并在表视图中显示它们。一切正常，现在我想添加一个进度条来显示从服务器获取数据的实时进度。我目前正在使用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表示进度条显示的时间（以毫秒为单位）。但我需要的不是这个，我需要最初显示进度条并动态和实时填充进度条，直到实际数据提取完成。只有在数据提取完成之后且数据呈现到表视图之前，才应完成进度条并且不可见。

除了为进度条提供静态时间外，还有其它逻辑吗？ primeng 以外的任何其他解决方案都是受欢迎的。

提前致谢。

更新

我的服务类，

@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

    }

}

Answer 1

您可以利用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();
}

请参阅此plunkr：http://plnkr.co/edit/8MDO2GsCGiOJd2y2XbQk?p=preview。

修改

当您开始获取数据时，您可以显示进度条并订阅progressEventObservable可观察数据。后者将允许您更新进度条。当请求完成时（在地图或订阅回调中），您可以关闭进度条。

以下是一个示例：

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实时进度条

1 个答案: