根据 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('')

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