Angular : Observable not working

Question

我不完全知道出了什么问题，但我正在尝试应用来自 angular doc 的搜索系统没有成功。

组件中使用的函数如下:

// my-comp.component.ts
public testing: Observable<any>;
private searchTerms = new Subject<string>();

search(term: string): void {
    this.searchTerms.next(term.toUpperCase());
}

每次我在搜索框中输入内容时都会触发此功能，所以这里没问题。

这是 ngOnInit 方法:

// my-comp.component.ts
ngOnInit(): void {

    this.testing = this.searchTerms
        .debounceTime(300)        // wait 300ms after each keystroke before considering the term
        .distinctUntilChanged()   // ignore if next search term is same as previous
        .switchMap(term => term   // switch to new observable each time the term changes
            // return the http search observable
            ? this.refundCaseService.search(term)
            // or the observable of empty heroes if there was no search term
            : this.test(term)
        )
        .catch(error => {
            // TODO: add real error handling
            console.log(error);
            return Observable.of<any>();
        });

}

test(term: string) {
    console.log(term);
    return Observable.of<any>();
}

此代码永远不会到达，它既不进入服务也不进入测试功能(我使用断点和 console.log 来确保)。

我不明白这是怎么回事。

使用: Angular 4.0.0 Angular -cli 1.0.6

Answer 1

其他答案是正确的，这确实是一个 Cold Observable。然而，这实际上起作用的原因是 Angular 的 async 管道。

示例中使用的 async 管道:

<div id="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
  <div>
    <div *ngFor="let hero of heroes | async"
         (click)="gotoDetail(hero)" class="search-result" >
      {{hero.name}}
    </div>
  </div>
</div>

因为这个管道，这个例子才有效。

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

来源:https://angular.io/api/common/AsyncPipe

---

tl;dr:您无法调试此代码，因为它是在模板/html 中处理的。