Angular 2实时进度条

Question

在我的 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 之前，进度条才应该完成并且不可见。

除了为进度条提供静态时间之外，是否有任何逻辑可以做到这一点？欢迎使用 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();
}

查看此插件: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();
    });
}