时间戳

首页 > 解决方案 > 如何使用来自 rxjs 的过滤器

javascript - 如何使用来自 rxjs 的过滤器

问题描述

我正在过滤一个 JSON 对象数组，我想根据传入的id参数返回找到的对象。

 getClient(id) {
   return this.http.get<any>(' http://localhost:3000/clients')
    .pipe(
      filter(client => client.idNumber === id)
    );
 }

上面的观察者没有被触发，也没有收到任何数据。

  getClient(id)
  .subscribe(
   (data) => {
     // nothing here
   }
  )

下面的实现getClient实现了我想要的。

 getClient(id) {
   return this.http.get<any>(' http://localhost:3000/clients')
    .pipe(
      map(clients => clients.find(client => client.idNumber === id))
    );
 }

我想了解，我是否以错误的方式使用过滤器运算符？我的用法与这里的用法有何不同

标签： javascriptangularrxjs

解决方案

正确，您filter以错误的方式使用 rxjs 运算符。

根据文档：

通过仅发出满足指定谓词的项来过滤源 Observable 发出的项。

在您的示例中，client发送到 filter 的值是您的 http 请求返回的客户端数组。然后，你说“不要发出任何东西，除非client（它实际上是一个数组并且没有“idNumber”属性等于id，这总是错误的，因为unefined !== number

如果要修改 ，则需要使用map运算符。map 操作符获取 observable 发出的内容，让您做一些事情（如过滤或在数组中查找），然后将修改后的数据返回给订阅者。

此外，如果您键入您的响应属性，TypeScript 会警告您这一点。而不是this.http.get<any>使用this.http.get<Client[]>或一些更合适的类型。您将能够在编译时看到Client[]没有属性idNumber。

推荐阅读