根据 FormControl 值变化过滤 Observable 数组

Question

我正在尝试使用 Observables 呈现两个项目列表。一个是完整结果，一个是过滤后的结果。

我有这个组件：

@Component({
    template: `
        <div *ngFor="let item of items | async">
            <span>{{item.name}}</span>
        </div>

        <input [formControl]="filterControl" />
        <div *ngFor="let item of filteredItems | async">
            <span>{{item.name}}</span>
        </div>
    `
})
export class TestComponent implements OnInit {
    private filterControl = new FormControl();
    private items: Observable<Item[]>;
    private filteredItems: Observable<Item[]>;

    ngOnInit() {
        this.items = this.dataService.get("items");

        this.filteredItems = this.filterControl.valueChanges
        .debounceTime(300)
        .distinctUntilChanged()
        .combineLatest(this.items, (filterValue, items) => {
            return items.filter((item: any) => item.name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1);
        });
    }
}

该代码将只发送一个 http 请求，而不是每个键入的过滤字母发送一个请求，这很好。然而，问题是在 filterControl 发出它的第一个值（当我在 input 中键入内容时）之前，不会显示过滤的项目。

有没有办法设置默认值，或者有更好的方法来解决这样的问题？

Answer 1

您可以使用 startWith 运算符：

this.filteredItems = this.filterControl.valueChanges.startWith('')

这将确保第一个值（默认空字符串）准备就绪

根据 FormControl 值变化过滤 Observable 数组

Filter Observable array based on FormControl value changes

angular

rxjs

angular2-forms

angular2-observables