角度観察可能combinelatest

Question

私はテーブルを移入するサービスにアクセスするコンポーネントを構築し、オブジェクトのリストで、観察を返すようにしようとしている

は私のサービスは機能を持っています

public getTranches(): Observable<Tranche[]> { 
    this.loadTranches(); //this calls the rest API to populate the variable _tranches 
    return this._tranches.asObservable(); // return variable <BehaviourSubject>_tranches asObservable 
    } 

マイコンポーネント

this.subscription = this.apiService 
    .getTranches() 
    .subscribe(
     (data) => { 
     this.tranches = data; 
     } 
); 

HTML：

を介してデータを表示するテーブルで構成されてい

ここではすべてうまく動作します。

私は入力を追加し、テーブルのヘッダー

//header example for sortby 
<div (click)="this.filters.sortby = name"></div> 

//input for filter 
<input (keyup)="this.filters.search = $event.target.value" type="text"> 

にイベントをクリックして、その情報

を格納する変数フィルタを使用するには、観測可能でフィルタ変数を変換し、それをマージする方法私を見ることができます単一のサブスクリプションにテーブルをフィードするために、私はフィルタリングとコンポーネントの並べ替えを実行できますか？

behaviourSubjectとしてfilterを使用してみましたが、それを行う方法が合わない場合はcombineLatestを使用して結合してみましょう。

Answer 1

私が正しく理解していれば、あなたはnext()方法、テーブルで表示されます項目の配列編曲を経て、BehaviorSubjectと放出するクラス変数_tranchesを持っています。

これがtrueの場合、フィルタリングやソートを達成するために、次のことを行う必要があります：

• ストア（例えばプライベートクラス変数など）の配列編曲どこか
• ソート又はフィルタコマンドがUIから発射され、ARRアレイにfilterと sort方法を適用
• は、これらのメソッドの結果を取得し、その後、正直私はクリックとからkeyupイベントは、あなたのコード内で管理されているかを理解していないBehaviorSubject

のnext()メソッドの引数としてそれらを使用しますこれは以前の点には影響しません。

Answer 2

は、それはあなたのhtmlに

<div (click)="this.filters.next({sortby:name})"></div> 
<input (keyup)="this.filters.next({search:$event.target.value})" type="text"> 

をAPI呼び出し

filters=new BehaviorSubject({sortby:'',search:''}) 
onSearch=()=>{ 
filters.map(obj=>{ 
// asume you will need to add a object param in getTranches to deal with sortby and search 
return this.apiService.getTranches(obj) 
}).subscribe(); 
} 

をトリガするために、ユーザーのアクションにonSearch機能バインドから始めると仮定します