将过滤器应用于 kendo-ui 下拉列表

Question

我想将过滤器应用于 kendo ui 下拉列表。 Here already provided the example

但是我的数据源是一个字符串数组而不是像

这样的数组

public data: Array<{ text: string, value: number }>;

我的数据是

public data: string[] = ['Apple', 'Orange', 'Banana'];

所以我修改了 link

中的代码

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <kendo-dropdownlist
    #list
    [data]="data"
    [filterable]="true"
  >
 </kendo-dropdownlist>

 })
 export class AppComponent {
@ViewChild("list") list;

public source: Array<string> = ['Apple', 'Orange', 'Banana'];

public data: Array<string>;

constructor() {
    this.data = this.source.slice();
}

ngAfterViewInit() {
  // need code here
    .subscribe(x => {
        this.data = x;
        this.list.loading = false;
    });
  }
}

我要的是ngAfterViewInit()里面的代码，我用的是angular5和rxjs 5.5。似乎无法使用代码。

this.list.filterChange.asObservable().pipe(
        switchMap(value => from([this.source]).pipe(
            tap(() => this.list.loading = true),
            delay(1000),
            map((data) => data.filter(contains(value)))
        ))
    )

Answer 1

我所做的唯一不同是删除了包含谓词中的 s.text。希望这可以帮助。

 ngAfterViewInit() {
   const contains = value => s =>
   s.toLowerCase().indexOf(value.toLowerCase()) !== -1;

  this.list.filterChange
  .asObservable()
  .pipe(
    switchMap(value =>
      from([this.source]).pipe(
        tap(() => (this.list.loading = true)),
        delay(1000),
        map(data => data.filter(contains(value)))
      )
    )
  )
  .subscribe(x => {
    this.data = x;
    this.list.loading = false;
  });
 }

将过滤器应用于 kendo-ui 下拉列表

Apply filter to kendo-ui dropdown list

kendo-ui

kendo-ui-angular2

angular

angular5