Angular2異步HTTP請求

Question

我這裏有ingredients.service

searchIngredients(query:string) { 
    let search = this.ingredientsUrl + "?q=" + query 
    return this.http.get(search, {headers:this.headers}) 
     .map(res=>res.json()); 
} 

我的HTML代碼如下的http請求功能...

<input [(ngModel)]="asyncSelected" 
     [typeahead]="dataSource" 
     (typeaheadLoading)="changeTypeaheadLoading($event)" 
     (typeaheadNoResults)="changeTypeaheadNoResults($event)" 
     (typeaheadOnSelect)="typeaheadOnSelect($event)" 
     typeaheadOptionsLimit="10" 
     typeaheadOptionField="name" 
     typeaheadAsync="false" 
     placeholder="Search for Ingredient" 
     class="form-control"> 

此使用NGX的自舉到我的應用程序提供預輸入功能。目前，當我輸入輸入內容時，它會調用searchIngredients，它會更新ingredients，這樣輸入的內容可以更新下拉菜單中的信息。但是，由於searchIngredients的呼叫是異步的，因此它不會及時更新ingredients，以便它在下拉菜單中顯示。

public getIngredientsAsObservable(query: string): Observable<any> { 
    console.log("observable") 
    this.query = query 
    this.searchIngredients() 

    return Observable.of(
     this.ingredients 
    ); 
} 

我怎麼可以運行

this.searchIngredients() 

return Observable.of(
    this.ingredients 
); 

，這樣我只回了一次觀察到的是this.ingredients更新？

我searchIngredients功能如下

searchIngredients(){ 
    this.ingredientService.searchIngredients(this.query) 
     .subscribe(
     data=>{ 
      this.ingredients = data.results 
      console.log("Success") 
     }, 
     error=>{ 
      console.log(error) 
     }, 
     ()=>{ 
      console.log("Request Complete") 
      console.log(this.ingredients) 
     } 
    ); 
} 

Answer 1

至於我可以在你的代碼中看到，您的服務將返回觀察到：

public searchIngredients(query:string) { 
    let search = this.ingredientsUrl + "?q=" + query 
    return this.http.get(search, {headers:this.headers}) 
     .map(res=>res.json()); 
} 

在你的組件，你可以剛絲機至字段：

export class YourComponent { 
    public ingredients; 

    ngOnInit() { 
     this.ingredients = this.searchIngredients(""); 
    } 

    searchIngredients(){ 
     this.ingredients = this.searchIngredients(this.query); 
    } 
}