2016-11-11 7 views
1

Iは、次のコードを有する:アレイがロードされたときにイベント・エミッターを購読

this.itemsService.getItems() 
    .subscribe(i => this.items = i); 

しかし、ユーザは、アイテムの種類を選択することができるが、私は、このイベント・エミッタを有する:

this.typeofitems.selectedType.subscribe(type => this.type = type); 

とうまくいきます。

今度は、this.itemsの商品リストをfilter functionでフィルタリングしたいと考えています。問題は、アイテムの読み込みが完了したときに、私は、サブスクリプション内のログを置けばaltough私は、知らない、次のとおりです。

this.itemsService.getItems() 
    .subscribe(i => {this.items = i; console.log("completed");}); 

それはそれが終わる私を示しています。だから私は試した:

this.itemsService.getItems() 
    .subscribe(i => { 
     this.items = i; 
     this.typeofitems.selectedType.subscribe(type => { 
      this.type = type; 
      this.filterByType(); 
     }); 
    }); 

filterByType() { 
    this.itemsfilteredByType = this.items.filter(i => i.type === this.type) 
} 

しかし、それは動作していません。だから私はサブスクリプトの中で購読することはできないと思う。 どうすれば実現できますか?

答えて

2

filter()コールバックに==の代わりに=を使用しているので、これが問題ではないことを確認してください。

function getItems() { 
    return Observable.of([{type: 1, val: 345}, {type: 2, val: 107}, {type: 1, val: 926}, {type: 2, val: 456} ]); 
} 

let typeOfItems = new Subject(); 

Observable.combineLatest(getItems(), typeOfItems) 
    .subscribe(vals => { 
    let [items, typeOfItem] = vals; 

    let results = items.filter(i => i.type == typeOfItem); 
    console.log(results); 
    }); 

typeOfItems.next(2); 

これによりアイテムをフィルタリング:

とにかく、オペレータ値を(各ソースから少なくとも1つの値が放出されなければならない間)、それのソースのいずれかの値を発するたびに発するcombineLatest()を使用することができtype == 2、コンソールに出力します

[[object Object] { 
    type: 2, 
    val: 107 
}, [object Object] { 
    type: 2, 
    val: 456 
}] 

それはへの呼び出しをトリガーtypeOfItems.next(2);を使用して最初にすべてのアイテムを受信した後、私はtype == 2によってそれらをフィルタリングすることを教えてくれたcombineLatest()のおかげで動作しますを使用するcombineLatest()のコールバックで、フィルタ処理されたアイテムを実際にフィルタリングして印刷します(これはであり、Observable.filter()ではありません)。別のsubscribe()コールバック内部https://jsbin.com/nenosiy/5/edit?js,console

ところで、当然のことができますsubscribe()

はライブデモを参照してください。以前の購読を手動で購読解除する必要があることを覚えておいてください。 Dynamically filtering rxjs stream

+0

ものは次のとおりです:typeOfItemsが変更されたとき、それが再びのgetItemsに呼び出します

は非常によく似た質問を参照してください? – FacundoGFlores

+0

@FacundoGFloresなぜあなたはそれを試してみませんか?最後に 'typeOfItems.next(1);'を追加し、何が起こるかを見てください。 – martin

関連する問題