在通过 http 加载数据之前，用于 angular2 kendo ui 网格的 busyindicator答案

【问题标题】：busyindicator for angular2 kendo ui grid before data is loaded through http在通过 http 加载数据之前，用于 angular2 kendo ui 网格的 busyindicator
【发布时间】：2017-02-15 01:51:42
【问题描述】：

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

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

谢谢，拉古斯

【问题讨论】：

标签： angular kendo-ui kendo-ui-angular2

【解决方案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)
            );
    }
}

【讨论】：

知道如果我使用 .map 而不是 .subscribe 会怎么做吗？我使用行为主体来获取网格数据，并且它以异步方式运行。

【解决方案2】：

您可以有条件地使用以下元素之一 -

<span class="k-icon k-i-loading"></span>
<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
<span class="k-icon k-i-loading" style="color: limegreen;"></span>

和我一样

<div *ngIf="!this.gridData">
    <span class="k-icon k-i-loading" style="font-size: 64px;"></span>
</div>

这里提到http://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-flipping

【讨论】：

【解决方案3】：

从 3.1.0 版开始，Angular 的 Kendo UI Grid 具有内置的加载指示器功能。

请参阅sample documentation here。

基本前提是设置[loading] property of the kendo-grid:

<kendo-grid 
  [loading]="yourService.loading"
  ...
>
<!-- Grid column configuration -->
</kendo-grid>

然后在您的服务类中根据您对远程数据源的查询状态将布尔加载变量设置为 true 或 false：

export abstract class NorthwindService extends BehaviorSubject<GridDataResult> {
    public loading: boolean;

    private BASE_URL = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc/';

    constructor(
        private http: HttpClient,
        protected tableName: string
    ) {
        super(null);
    }

    public query(state: any): void {
        this.fetch(this.tableName, state)
            .subscribe(x => super.next(x));
    }

    protected fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;
        this.loading = true;

        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .pipe(
                map(response => (<GridDataResult>{
                    data: response['value'],
                    total: parseInt(response['@odata.count'], 10)
                })),
                tap(() => this.loading = false)
            );
    }
}

【讨论】：