这可能是因为你没有正确更新grid的筛选配置。在你的kendo-grid-filter组件中,确保你设置了属性[filter]="state",并且在ngOnInit()或任何其他需要重新加载数据的事件中更新筛选状态。以下是一个示例:
HTML:
<kendo-grid [data]="gridData" [sortable]="true" [filterable]="true" [filter]="state" (filterChange)="onFilterChange($event)">
<kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
</kendo-grid>
typescript:
import { Component, OnInit } from '@angular/core';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';
import { SampleService } from '../services/sample.service';
@Component({
selector: 'my-component',
template: `
<kendo-grid
[data]="gridData"
[sortable]="true"
[filterable]="true"
[filter]="state"
(dataStateChange)="onStateChange($event)">
<kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
</kendo-grid>
`
})
export class MyComponent {
public gridData: GridDataResult;
public state: State = {
skip: 0,
take: 10,
filter: {
logic: 'and',
filters: []
}
};
constructor(private service: SampleService) { }
public onStateChange(state: DataStateChangeEvent): void {
this.state = state;
this.loadGrid();
}
public loadGrid(): void {
this.service.getData(this.state)
.subscribe(data => {
this.gridData = process(data, this.state);
});
}
public onFilterChange(filter: any): void {
this.state.filter = filter;
this.loadGrid();
}
}
注意:在这个示例中,我们使用SampleService与远程服务交互并获取数据。getData函数将state作为参数传递给服务,以在远程服务端过滤和分页数据。