角度2 ngのブートストラップ・タイプヘッドが追加のパラメーターを渡す

Question

現在の入力テキストを含むng-bootstrapのタイプヘッドで、フォーム・アレイ索引をgetCities関数に渡す方法。考慮するは、フォームの配列のインデックスです。

address.component.html

<input name="city" type="text" id="city" formControlName="city" [ngbTypeahead]="getCities"> 

address.component.ts

getCities = (text$: Observable<string>) => 
    text$ 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap(query => 
     query.length < 2 ? [] : this.apiService.getCities(query).catch(() => { 
      return Observable.of([]); 
     });) 

Answer 1

あなたはngbTypeahead関数に追加のパラメータを渡すために必要されているようです（それも聞こえますインデックスパラメータまたはその他）。ドキュメント（https://ng-bootstrap.github.io/#/components/typeahead/api）はパラメータを渡すために用意されていませんが、あなたは、渡されたインデックス（または何でも）パラメータを使用して適切な関数を返す「工場」メソッドを実装することができ

。

address.component。 HTML

<input name="city" 
    type="text" 
    id="city" 
    formControlName="city" 
    [ngbTypeahead]="getCities($index)" > 

address.component.ts

public branchSearchFactory($index: any): (text: Observable<string>) => Observable<any[]> { 


    //Create a function that considers the specified $index parameter value 
    let getCities = (text$: Observable<string>) => 
     text$ 
      .debounceTime(300) 
      .distinctUntilChanged() 
      .switchMap(query => { 

       //some logic involving $index here 
       //... 

       //query.length < 2 ? [] : this.apiService.getCities(query).catch(() => { 
       //return Observable.of([]); 
      }); 

    //Return that "custom" function, which will in turn be called by the ngbTypescript component 
    return getCities; 
}