Angular 2实时进度条

在我的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

    }

}

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

bootstrap(AppComponent,[
  HTTP_PROVIDERS,provide(BrowserXhr,{ useClass: CustomBrowserXhr })
]);

export class ProgressService {
  progressEventObservable:Subject<any> = new Subject();
}

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