可观测永不触发的角switchMap

Question

我想实现一个搜索组件，如角教程。

问题:

search方法触发并修改searchTerms: Subject<string>，但switchMap从不触发。

代码：

进口

import { Component, OnInit } from '@angular/core';

import { SearchService } from "./search.service";

import { Observable }        from 'rxjs/Observable';
import { Subject }           from 'rxjs/Subject';

// Observable class extensions
import 'rxjs/add/observable/of';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

import {Suggest} from "./suggest";

解码器

@Component({
  selector: 'search-engine',
  templateUrl: 'search-engine.component.html'
})

组件

export class SearchEngineComponent implements OnInit {

  suggestions: Observable<Suggest[]>;
  private searchTerms = new Subject<string>();

  constructor(private searchService: SearchService) {  }

  ngOnInit(): void {
    this.suggestions = this.searchTerms
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term => {
        console.log(term);
        return Observable.of<Suggest[]>([]);
      })
      .catch(error => {
        console.log(error);
        return Observable.of<Suggest[]>([]);
      });
  }

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

<input #searchBox id="search-box" (keyup)="search(searchBox.value)">

Answer 1

你必须订阅可观察到的，如果你不订阅，什么都不会发生。

编辑：

还有一种情况是，您可以通过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>

更多关于async管道这里的信息