각도 4로 @childview를 사용하여 검도 다중 선택을 연결

Question

사용자 정의 검도 필터를 격자에 적용했습니다 (아래의 격자에서 필터링 된 열). 가 https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/filtering/

문제가된다 : 원소 여기 바인딩 : @ViewChild("authorList") public authorList: MultiSelectComponent; 여전히 정의되지 않는다 (더 발생

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

I이 예에서와 같이 상기 텍스트 박스 입력시 다중 선택 데이터를 필터링 할 수 있도록하고자 오류). 내 타이프 라이터 코드에서 추출 :

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을 처리 할 수 ​​u는이`@ViewChild을 시도 할 수 있습니다)

<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