在Angular 4中将剑道多选与@childview连接起来答案

【问题标题】：Connecting kendo multiselect with @childview in Angular 4在Angular 4中将剑道多选与@childview连接起来
【发布时间】：2017-12-23 20:07:01
【问题描述】：

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

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

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

【问题讨论】：

你应该可以在ViewInit()之后访问viewchild 你可以试试这个@ViewChild("authorList") public authorList: any;

标签： angular typescript kendo-ui-angular2

【解决方案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

【讨论】：