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

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