相关疑难解决方法(0)

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);
}
Run Code Online (Sandbox Code Playgroud)

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 …
Run Code Online (Sandbox Code Playgroud)

progress-bar angular

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

angular ×1

progress-bar ×1