Question

我尝试使用Observable来渲染两个项目列表。一个有完整的结果，一个有过滤结果。

我有这个组件：

@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数组

1 个答案: