Rxjs Angular 2 async pipe работает один раз

Question

Я попытался сделать асинхронную трубку в своем проекте, но это действительно работает только в первый раз.

После того, как мой http.get ничего не возвращает ... Так что я хотел бы понять, что я делаю неправильно, потому что теперь я полностью застрял.

(у меня нет веб-службы JSONP доступны, и я думаю, что здесь у меня есть рь, но обычно это было бы то же самое)

Мой код услуги:

getLocation(query: string): Observable<Array<Prediction>> { 
    console.log("[call getLocation]") 
    let headers = new Headers(); 
    this.locationUrl = this.locationUrl+"?location="+query; 
    headers.append("Accept","application/json"); 
    return this.http.get(this.locationUrl, {headers: headers}) 
     .switchMap(this.extractData) 
     .catch(this.handleError); 
} 

Мой код компонента :

predictions: Observable<Array<Prediction>>; 


constructor(
    private _router: Router, 
    private _EventCreationService: EventCreationService, 
    private _LocationService: LocationService) { 

    console.log("[constrct]") 
    predictions = this.term.valueChanges 
     .debounceTime(500) 
     .distinctUntilChanged() 
     .switchMap((term:string): Observable<Array<Prediction>> => { 
      console.log("[changed called]"+term) 
      return this._LocationService.getLocation(term) 
     }) 
    ); 
} 

и просто это в моем HTML, чтобы получить данные:

*ngFor="#item of predictions |async" 

Так что я считаю, что это мое местоположение, которое не отменяет подписку на первое событие, но именно поэтому я использовал коммутатор ... но кажется, что он не работает.

редактировать: ее является кодом extractData и HandleError:

private extractData(res: Response): Array<Prediction> { 
    if (res.status < 200 || res.status >= 300) { 
     throw new Error('Bad response status: ' + res.status); 
    } 
    let body = res.json(); 
    let result : Array<Prediction> = new Array<Prediction>(); 
    result.push(body.predictions); 
    console.log("-->"+JSON.stringify(body)) 
    return result; 
} 

private handleError (error: any) { 
    // In a real world app, we might send the error to remote logging infrastructure 
    let errMsg = error || 'Server error'; 
    console.error(JSON.stringify(errMsg)); // log to console instead 
    return Observable.throw(errMsg); 
} 

я начинаю от интересно, если это может быть возможная ошибка моей угловой 2 или rxjs версии ....

Answer 1

Я вижу ошибку в вашем методе getLocation. Это не switchMap оператор, но map один:

getLocation(query: string): Observable<Array<Prediction>> { 
    (...) 
    return this.http.get(this.locationUrl, {headers: headers}) 
    .map(this.extractData) // <----------- 
    .catch(this.handleError); 
} 

Answer 2

Вместо switchMap использования flatMap, который проецирует каждый элемент наблюдаемой последовательности в другой наблюдаемой последовательности.

инков вы хотите отменить предыдущие наблюдаемые, если они находятся в процессе, использовать flatMapLatest