Angular2如何清空可观察流

Question

我正在使用 Angular 2.0.0-beta.0 和 TypeScript 1.7.5

当您在搜索框中键入内容并找到内容并显示在屏幕上时，您删除了搜索输入框并希望显示一个空列表。它使用这段代码工作： this.searchTermStream.next("makesureyoudontfindanything");

有没有人有更好的不做 http 请求的清洁解决方案？

@Component({
    selector: 'contact-search',
    template: `
        <div class="container">
            <div class="form-group">
                <label for="inputUser">Search</label>
                <input #inputUser (keyup)="search(inputUser.value)">
            </div>
            <ul>
                <li *ngFor="#contact of contactList | async">{{contact.name}}</li>
            </ul>
        </div>
    `
})

export class ContactSearch {

    private searchTermStream = new Subject<string>();

    private contactList: Observable<Contact[]> = this.searchTermStream
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap((value: string) => this.contactService.searchContacts(value))

    constructor(private contactService: ContactService) {}

    search(value: string) {
        if (value) {
            this.searchTermStream.next(value);
        }
        else {
            this.searchTermStream.next("makesureyoudontfindanything");
        }
    }
}

Answer 1

您可以在调用服务之前检查值是否为空：

private contactList: Observable<Contact[]> = this.searchTermStream
    .debounceTime(300)
    .distinctUntilChanged()
    .switchMap((value: string) => 
       0 < value.length ? this.contactService.searchContacts(value) : Observable.of([]))

search(value: string) {
    this.searchTermStream.next(value);
}

Angular2如何清空可观察流

Angular2 how to empty observable stream

http

observable

typescript

angular