關於可觀察的永不觸發的角度switchMap

Question

我想要在Angular Tutorial中實現搜索組件。

問題：

的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); 
    } 
} 

HTML

<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管here