Question

我正在使用Angular 2的Kendo网格组件。我注意到每当我输入过滤器（在列标题内）时，它都会触发stateChanged事件。但是我打电话给服务器所以如何添加某种延迟以避免在每次击键时调用服务器？

Answer 1

H3llo Sam，

等待一段时间让剑道团队加入此类功能后，我终于决定采用以下方法：

我们可以使用BehaviorSubject来保存剑道网格'DataStateChangeEvent'并且还包括时间延迟。这样我们就会丢弃每一个网格的状态变化（及其服务器调用），并在一段时间内执行。

.ts组件：

input = Input(shape=(11, 11, 16))
print(MaxPool2D(pool_size=(2, 2), strides=2, padding='valid')(input).shape)
# >>> (?, 5, 5, 16)
print(MaxPool2D(pool_size=(2, 2), strides=2, padding='same')(input).shape)
# >>> (?, 6, 6, 16)

.html模板：

...

import {
    Component, trigger, state, animate, transition, style, OnInit, OnDestroy
} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';
import {
    GridComponent, GridDataResult, DataStateChangeEvent
} from '@progress/kendo-angular-grid';
import {
    DataSourceRequestState, DataResult, process, State, GroupDescriptor
} from '@progress/kendo-data-query';
...

export class ExampleComponent implements OnInit, OnDestroy {

// Subscriptions (we will unsubscribe them at ngOnDestroy)
subscriptions: Subscription = new Subscription();

// Grid data
items: GridDataResult;

// Kendo grid initial DataSourceRequestState
defaultDataSourceRequestState =
    { skip: 0, take: 20, group: [], sort: [] } as DataSourceRequestState;

// Kendo grid state BehaviorSubject
stateSubject =
    new BehaviorSubject<DataSourceRequestState>(
        this.defaultDataSourceRequestState
    );

...

constructor(...) {
    // Delay for Kendo grid dataStateChange event of 200 ms
    this.subscriptions.add(
        this.stateSubject
        .debounceTime(200)
        .subscribe(s =>
            this.dataStateChangeCompleted(this.stateSubject.getValue())
        )
    );
}

ngOnDestroy() {
    this.subscriptions.unsubscribe();
}

dataStateChange(stateChange: DataStateChangeEvent) {
    // Set BehaviourSubject´s new state
    this.stateSubject.next(stateChange);
}

dataStateChangeCompleted(stateChange: DataSourceRequestState) {
    // TO DO: Here we can do the Server call or any other action
    // once the delay has finished with the last grid state
    this.getItems(stateChange);
}

...

}

我希望这会有所帮助：）

问候。

如何在剑道网格过滤器上添加延迟

1 个答案: