Question

我想从Array返回过滤的observable，但是当我订阅这个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中的过滤器始终返回另一个Observable，并且永远不会直接对已处理的值进行评估。

运算符filter()要求您根据是否要在已处理的Observable流中包含或排除该项来返回布尔值true或false。由于您将整个数组作为单个值传递Rx.Observable.of(items)，因此它总是传递所有内容或者什么也不传递（返回的数组转换为布尔值）。

因此，让我们使用Observable.from静态方法从迭代中创建一个Observable，它将数组中的每个项目作为单个值发出，然后仅filter()排除所有与谓词不匹配的项目。

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

Rx js过滤器方法不返回过滤器数组

2 个答案: