Rx js-Filtermethode gibt das Filterarray nicht zurück

Question

Ich möchte gefilterte Observable aus Array zurückgeben, aber wenn ich diese Observable abonniere, gibt sie das gefilterte Array nicht zurück, es gibt das ursprüngliche Array zurück. Warum?

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

Weil das ist nicht wie Sie Observables in RxJS verwenden sollen. Filter in RxJS geben immer ein anderes Observables zurück und werten das Verarbeitete nie direkt auf.

Operator filter() erwartet Sie auf boolean true oder false Basis zurückkehren, ob Sie aufnehmen möchten, oder das Element aus dem verarbeiteten beobachtbare Strom auszuschließen. Da Sie das gesamte Array als einzigen Wert mit Rx.Observable.of(items) übergeben, übergibt es immer alles oder nichts (das zurückgegebene Array wird in boolean konvertiert).

So verwenden wir die statische Methode , um ein Observable aus einem iterablen Objekt zu erstellen, das jedes Element im Array als einzelnen Wert und dann nur filter() ausgibt, um alle Elemente auszuschließen, die nicht mit dem Prädikat übereinstimmen.

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

Sie können ein Array mit dem toArray opereator zurück:

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();