我有一个自定义的剑道过滤器应用于网格(从下面的网格过滤列) .
<kendo-grid-column field="applianceUserFullName" title="Zgłaszający">
<ng-template kendoGridFilterMenuTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService">
<kendo-multiselect #authorList style="width:220px"
[data]="this.distAuthors"
textField="applianceUserFullName"
valueField="applianceUserFullName"
[valuePrimitive]="true"
[filterable]="true"
[value]="authorFilters(filter)"
(valueChange)="authorChange($event, filterService)"
[placeholder]="'Wybierz wartość'">
</kendo-multiselect>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.applianceUserFullName}}
</ng-template>
</kendo-grid-column>
我希望能够在键入上面的文本框时从多选中过滤数据,如下例所示:https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/filtering/
问题是:元素绑定在这里: @ViewChild("authorList") public authorList: MultiSelectComponent;
仍未定义(导致进一步的错误) . 从我的打字稿代码中提取:
ngAfterViewInit() {
const contains = value => s => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1;
console.log("After view init");
//if (this.authorList !== undefined) {
this.authorList.filterChange.asObservable().switchMap(value => Observable.from([this.distAuthors])
.do(() => this.authorList.loading = true)
.delay(1000)
.map((data) => data.filter(contains(value))))
.subscribe(x => {
this.distAuthors = x;
this.authorList.loading = false;
});
//}
}
有什么我可以做错的吗?
或者这可能不是这样做的,如果是这样的话:做这种过滤器的正确方法是什么?
1 回答
您可以在模板中使用可过滤的MultiSelect并处理filterChange事件:
EXAMPLE