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

Question

我有一个自定义的剑道过滤器应用于网格（从下面的网格过滤列）。

<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;
                });
        //}
    }

有什么我可以做错的吗？ 或者这可能不是这样做的，如果是这样的话：做这种过滤器的正确方法是什么？

Answer 1

您可以在模板中使用可过滤的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