Angular 2实时进度条

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

您可以利用onprogressXHR 提供的事件。这允许获得有关下载进度的提示。

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();
    });
}