角2のデータを1回ロードしてフィルタリングするローカルで観測可能

Question

角2のアプリがあり、ページの入力をapiに呼び出すオートコンプリートで設定して、サイドフィルタリングと値の返却を行います。ここにあるチュートリアルのようなもの。

私は自分のページへの入力をもう少し増やそうとしていますが、サーバー側でフィルタリングする必要はありません。それは非効率的です。コンポーネントがロードされ、コンポーネントでフィルタリングされるときに、すべての値を取得するほうが簡単です。これは私に問題の不足を引き起こしている。私は必要な3文字列の配列を返すAPI呼び出しを持っています。

getFormFilters(): Observable<FormFilterModel> { 
    return this._http.get(this.baseUrl+this.getFormFiltersPath) 
     .map(res => res.json() as FormFilterModel); 
    } 

モデル：：

export interface FormFilterModel { 
    array1: string[]; 
    array2: string[]; 
    array3: string[]; 
} 

これは正常に動作し、私は、観察を取り戻す私はそうのような標準的な方法を使用して角度サービスからそれらを取得しています。私が立ち往生したところで、これらの3つのアレイをローカルでどのようにフィルタリングするのですか？私は自分の入力を私のフォームコントロールに接続しているのと同じように、サーバー側のフィルタリング入力と同じようにします。 Observableの実際の配列をフィルタリングする方法を理解できません。私はそのコード付きでだのはここです：

this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap(term => //some filtering here of formFilterModel$ to return a subset of array1 based on input) 

私はちょうど良い正規表現を介した配列をフィルタリングするが、観測可能で、実際の配列になって、私はちょうど行うことができないようなものであることができます。

Answer 1

あなたのAPI呼び出しを購読し、結果をコンポーネントに保存します。次に、配列をvaluesChanges.mapにフィルターします。

ngOnInit() { 
    this.getFormFilters().subscribe(formFilters => { 
    this.formFilters = formFilters; 
    }); 

    this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges 
    .debounceTime(300) 
    .distinctUntilChanged() 
    .map(search => this.formFilters.array1.filter(value => matches(value, search))) 
} 

Answer 2

まず、レスポンスを購読して、受信したオブジェクトをフィルタリングする必要があります。

formfilterData :FormfilterModel; 
filteredArray1:stringp[]=[]; 
this.serviceOb.getFormFilters().subscribe((formfilterData)=>{ 
    this.formfilterData=formfilterData; 


    }); 
    this.formfilterData.array1.filter((data)=>{ 

    this.formfilterData.push(data); 
    })