通过http加载数据之前，angular2 kendo ui网格的busyindicator [英] busyindicator for angular2 kendo ui grid before data is loaded through http

问题描述

我正在使用angular2 kendo ui网格，并通过http调用将数据绑定到网格

I'm using angular2 kendo ui grid and binding data to the grid by http call

在http调用返回数据之前，我需要显示忙碌指示器而不显示网格标题直到分配数据为止.

before http call returns the data i need to show busy indicator without showing grid header till data is assigned.How to achive this

谢谢， Raghu s

Thanks, Raghu s

推荐答案

我是通过在HTML模板中声明以下内容来实现这一目标的.

I achieved this by declaring the following within the HTML template.

在网格上方添加一个新的div，其中包含加载网格时的条件加载文本:

Add a new div above the grid with a conditional loading text for when the grid is loading:

<div *ngIf="loading == true" class="loader">Loading..</div>

在完成加载后在网格周围添加div包装器:

Add a div wrapper around the grid for when the loading in completed:

<div *ngIf="loading == false">
  <kendo-grid [data]="view1">
  <kendo-grid>
</div>

在app.component.ts

export class AppComponent{
    private loading: boolean = true;

constructor(private http: Http      
    ) {
        http.get('/api/Data')
            .map(response => response.json())
            .subscribe(result => {

                this.loading = false;
                this.view1 = result;
                this.loadProducts();
            },
                 err => console.log(err)
            );
    }
}

这篇关于通过http加载数据之前，angular2 kendo ui网格的busyindicator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！