Angular 角度4+RxJS滤波

我正试着绕着RxJS转，我有一个问题。为了更好地理解一切是如何工作的，我启动了一个使用Angular CLI生成的新的空白Angular 4应用程序。在其中，我运行以下代码：

这是.http.get'./src/app/data/products.json' .mapres=>res.json .filteritem:any=>{ let price=parseFloatitem.price； 退货价格<5.0&&price>=2.5； } .subscribelist:Array=>{ 这个错误=； 本产品=列表； }, 错误=>{ this.error=错误；

---

}; 下面我从其中一个答案中发现：

若你们像上面那个样做，那个么就把你们的数组转换回可观察的流，你们可以对它应用过滤器

但我仍然认为使用数组的过滤函数比使用rxjs过滤函数更好

我喜欢这样做，首先将响应映射到json，然后订阅并为我的数组对象赋值，然后应用过滤

因为首先要将响应转换为适当的对象类型，所以过滤变得很容易

this.http.get('./src/app/data/products.json')
    .map(res => res.json())
    .subscribe((list: Array<ProductModel>) => {
      this.error = '';
      this.products = list;
    };

如果你的物品价格已经浮动，你可以这么做

let filterProduct = this.products.
              filter(o=> o.price < 5.0 && o.price >= 2.5);

或

---

第二个实现之所以有效，是因为from方法。为了更好地理解这一切是如何工作的，您首先需要了解from是如何工作的。from接收一个iterable，并每次发出一个迭代。例如，如果你有

Observable.from([1, 2, 3]).subscribe(res => console.log('onNext: ', res));

您的输出将是

// onNext: 1
// onNext: 2
// onNext: 3

现在假设我们添加rxjs过滤器操作符。过滤器方法应用于每个发出的值

Observable.from([1, 2, 3])
    .filter(res => {
        console.log('filter: ', res);
        return res === 3; // we only want items that === 3 to continue to next step in sequence
    })
    .subscribe(res => console.log('onNext: ', res);

您的输出将是

// filter: 1
// filter: 2
// filter: 3
// onNext: 3

在第一个实现中，调用json，并假设它返回[1,2,3]。整个数组传递给rxjs过滤器方法，而不是每次迭代。因此，您要在整个阵列上检查条件price<5.0&&price>=2.5，这是无法做到的

正确的解决方案是对输出执行js筛选方法

this.http.get('/./src/app/data/products.json')
    .map(res => {
        let data = res.json();
        return data.filter((item: any) => {
            let price = parseFloat(item.price);
            return price < 5.0 && price >= 2.5;
        });
    })
    .subscribe(list => {
        this.products = list;
    });

---

TLDR:rxjs过滤器的工作原理与本机js过滤器相同，您只需了解可观察序列的发射方式，就可以知道应该选择哪一个。

您想做什么？你能在Plunk中添加、预先解释或复制吗？使用此Plunk中的starter Plunk你能使用可用于fitlering arrayinvoke的筛选器立即订阅你的GET方法没有任何意义。你需要返回Observable，然后订阅itI更新我的答案有看，它回答你如何可以利用你的方式过滤功能want@PankajParkar-更新的答案只是删除了过滤方法，只是在将work@haifzhan-你实际上是在订阅obsever，这意味着你将有机会为你的对象分配响应，只有当你从服务器得到响应时，也就是说，当你从get方法得到响应时，才会发生这种情况…@haifzhan-你可以删除map并使用subscribe，但这里的要点是对数组应用过滤函数，而不是使用rxjs函数…我想在你的回答中你也这么做了…谢谢。我相信，在地图或订阅过滤将工作。我只是想知道如何使用RxJS过滤器实现这一点。您知道这两种方法的性能是否有差异吗？@dpdragnev-是的，因为已经接收到的数组上应用了数组的筛选方法，其中rxjs filter方法需要转换oberservable中接收的数据，而您可以对其应用filter…因此，当您对已接收的数组应用rxjs filter时，它会起到双重作用。您可以删除map并使用subscribe，但这里的重点是对数组应用filter函数，而不是使用rxjs函数…我认为在您的回答中您做到了相同…因为rxjs过滤器是复杂的东西…这在本教程中是不需要的case@PranayRana你说得对。正如我在编写的代码中所评论的，这不是Rxjs过滤器操作，我认为这是将getItems放在服务类中，并且只在组件类中需要时订阅它。

Observable.from([1, 2, 3]).subscribe(res => console.log('onNext: ', res));

// onNext: 1
// onNext: 2
// onNext: 3

Observable.from([1, 2, 3])
    .filter(res => {
        console.log('filter: ', res);
        return res === 3; // we only want items that === 3 to continue to next step in sequence
    })
    .subscribe(res => console.log('onNext: ', res);

// filter: 1
// filter: 2
// filter: 3
// onNext: 3

this.http.get('/./src/app/data/products.json')
    .map(res => {
        let data = res.json();
        return data.filter((item: any) => {
            let price = parseFloat(item.price);
            return price < 5.0 && price >= 2.5;
        });
    })
    .subscribe(list => {
        this.products = list;
    });