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

问题描述

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

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

谢谢，拉古s

解决方案

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

在网格上方添加一个带有条件加载文本的新 div，用于网格加载时:

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

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

<kendo-grid [data]="view1"><剑道格子>

在app.component.ts

导出类 AppComponent{私人加载:boolean = true;构造函数(私有 http: Http){http.get('/api/Data').map(response => response.json()).订阅(结果 => {this.loading = false;this.view1 = 结果；this.loadProducts();},错误 =>控制台日志(错误));}}

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

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

Thanks, Raghu s

解决方案

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

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>

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

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

In 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 网格的繁忙指标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！