4

angular2 剣道 ui グリッドを使用しており、http 呼び出しでデータをグリッドにバインドしています

http呼び出しがデータを返す前に、データが割り当てられるまでグリッドヘッダーを表示せずにビジーインジケーターを表示する必要があります.これを達成する方法

ありがとう、ラグー

4

3 に答える 3

3

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)
            );
    }
}
于 2016-10-14T05:59:02.663 に答える
1

バージョン 3.1.0 の時点で、Angular 用の Kendo UI Grid には組み込みの読み込みインジケーター機能があります。

こちら のサンプル ドキュメントを参照してください。

基本的な前提は、次の[loading]プロパティ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)
            );
    }
}
于 2019-01-29T20:25:52.023 に答える