将过滤器应用于剑道用户界面下拉列表

Question

我想将过滤器应用于剑道UI下拉列表。 这里已经提供了示例

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

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

我的数据是

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

所以我修改了链接中的代码

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()里面的代码，我使用 angular 5 和 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;
});
}