Angular2非同期HTTPリクエスト

Question

私は

<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-ブートストラップを使用しています...次のように私のhtmlコードがあるingredients.service

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

ここhttp要求機能を持っています。現在、入力を入力すると、を更新するsearchIngredientsが呼び出され、先行入力がドロップダウンメニューの情報を更新できるようになります。ただし、searchIngredientsへの呼び出しは非同期であるため、ドロップダウンメニューに時間が表示されるように、ingredientsを更新しません。

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

    return Observable.of(
     this.ingredients 
    ); 
} 

this.ingredientsが更新されると私は、観察を返すように、どのように私は

this.searchIngredients() 

return Observable.of(
    this.ingredients 
); 

を実行できますか？

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

コンポーネントではあなただけにそれを配線することができます限り、私はあなたのコード内で見ることができるように、あなたのサービスが観察返し

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

次のように

私searchIngredients機能がある

フィールド：

export class YourComponent { 
    public ingredients; 

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

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