首页 文章

在Angular 4中将kendo multiselect与@childview连接起来

提问于
浏览
0

我有一个自定义的剑道过滤器应用于网格(从下面的网格过滤列) .

<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 回答

  • 0

    您可以在模板中使用可过滤的MultiSelect并处理filterChange事件:

    <kendo-multiselect
                             [filterable]="true"
                            (filterChange)="onMSFilterChange($event)"...
    
    public onMSFilterChange(e) {
          if(e.length) {
            this.filteredCategories = this.initialCategories
            .filter(cat => cat.CategoryName.toLocaleLowerCase().indexOf(e.toLocaleLowerCase()) > -1); 
          } else {
            this.filteredCategories = this.initialCategories;
          }
        }
    

    EXAMPLE

相关问题