剣道マルチセレクションと@childviewをAngular 4で接続する

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;をさらに引き起こす（まだ未定義ですエラー）。私のtypescriptですコードから エキス：

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

あなたはテンプレートで濾過可能複数選択を使用してfilterChangeイベント処理することができます：あなたはviewchild afterViewInitを（アクセスできるようにする必要があり

<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