Rx jsフィルタメソッドがフィルタ配列を返しません

Question

フィルタリングされたobservableをArrayから戻したいのですが、このobservableを購読しているときにフィルタリングされた配列を返さない場合、元の配列が返されます。どうして？

const filterBy = {title: 'javascript'}; 
const items = [{title: 'javascript'}, {title: 'css'}, {title: 'html'}]; 


const filtered = Rx.Observable.of(items).filter(i => { 
    const filtered = i.filter(item => item.title.indexOf(filterBy.title) !== -1); 
    console.log('filtered', filtered); // The array length is one 
    return filtered; 
}) 

filtered.subscribe(f => console.log(f) // The array length is three); 

Answer 1

これはRxJSでObservablesを使用する方法ではないためです。 RxJS内のフィルタは常に別のObservablesを返し、決して処理された値を直接決して決してしません。

オペレータfilter()は、処理されたオブザーバブルストリームから項目を含めるか除外するかに基づいてブール値trueまたはfalseを返すことを前提としています。 Rx.Observable.of(items)で配列全体を単一の値として渡すので、常にすべてまたは何も渡しません（返された配列はブール値に変換されます）。

Observable.from静的メソッドを使用して、アレイ内の各アイテムを単一の値として放出するObservableを作成し、述語と一致しないすべてのアイテムを除外するfilter()というObservableを作成します。

const filterBy = {title: 'javascript'}; 
const items = [{title: 'javascript'}, {title: 'css'}, {title: 'html'}]; 

const observable = Rx.Observable.from(items).filter(item => { 
    return item.title.indexOf(filterBy.title) !== -1; 
}); 

observable.subscribe(f => console.log(f)); 

Answer 2

あなたはのtoArrayのopereatorを持つ配列を返すことができます。

const filterBy = {title: 'javascript'}; 
const items = [{title: 'javascript'}, {title: 'css'}, {title: 'html'}]; 

const observable = Rx.Observable.from(items).filter(item => { 
    return item.title.indexOf(filterBy.title) !== -1; 
}).toArray();