angular - 在通过 http 加载数据之前，angular2 kendo ui 网格的 busyindicator

Question

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

在 http 调用返回数据之前，我需要显示忙碌指示器而不显示网格标题，直到分配数据。如何实现这一点

谢谢，拉古斯

Answer 1

我通过在 HTML 模板中声明以下内容来实现这一点。

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

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

在加载完成时在网格周围添加一个 div 包装器:

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