Angular 如何使用 rxjs 管道过滤可观察的数据

2024-03-22

我在服务文件中调用了一个名为 getWorkOrders() 的方法,该方法又调用服务器来获取记录。

这是我的服务。我正在使用新的 HttpClient。

export class BackendServices {
  private BASE_URL ='http://localhost:3000/backend';
  constructor(private http: HttpClient) {}
  getWorkOrders(){
    return this.http.get(this.BASE_URL + '/getworkorders/');
 }
}

组件.ts 文件

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .subscribe((data: any) =>
            this.woSubject.next(data),
        );
      }

从组件 getWorkOrders 方法中,如何过滤从服务器获取的所有记录中的数据。我知道它正在使用管道和过滤器 rxjs 运算符,但不确定如何将它们组合在一起。


如果您想使用 rxjs 过滤器过滤来自服务器的工作订单,则需要将工作订单数组转换为可观察的工作订单,例如

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/')
                   .pipe(map((data) => Observable.from(data));
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(
              filter(data => data.timestamp > 123456786 ),
              toArray()
           )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

另一种方法是使用标准数组过滤器来过滤映射中的数组,例如。

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/');
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(map(data => data.filter(workorder => workrder.timestamp > 123456786) )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

我想问的一个问题是,为什么要将可观察订阅的结果推送到行为主题中?一般来说,如果您将订阅的结果推送到另一个可观察量中,则可以通过组合可观察量来实现相同的效果

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 如何使用 rxjs 管道过滤可观察的数据 的相关文章

随机推荐

  • 使用facet_wrap和geom_segment删除不必要的y轴点

    我使用以下命令将 y 轴点映射到 x 轴geom segment 然后使用facet wrap将数据分成两个图 然而 y 轴点都显示在这两个图上 我怎样才能只拥有与每个相关的必要的 y 轴点facet wrap 示例代码 dat lt st
  • 无法调整图表边距

    我创建了一个图表 但它在 Y 轴和图表边框之间有一个左边距 我怎样才能让它变成0 是否可以在图表和边框之间定义 5px 的统一边距 左 上 右 下 我的图表代码如下 Chart chart new Chart AntiAliasing An
  • 使用 ObjectInputStream 读取文件时出现 EOFException [重复]

    这个问题在这里已经有答案了 我基本上有一个类似的问题 如此处所述 Java中读取objectinputstream时出现EOF异常 https stackoverflow com q 2308128 1065197 但我找不到干净代码的答案
  • jQuery 1.4.1 中缺少 JSON stringify?

    显然 jQuery 能够将给定的对象或字符串解码为 JSON 对象 但是 我有一个 JS 对象 需要将其 POST 回服务器 并且我在 jQuery 中找不到包装 JSON stringify 函数的实用程序 Chrome Safari 4
  • 在运行时改变对象的行为

    如何在运行时更改对象的行为 使用C 我举一个简单的例子 我有课Operator包含一个方法operate 让我们假设它看起来像这样 double operate double a double b return 0 0 用户将给出一些输入值
  • ASP.NET MVC 模型与表单元素名称中的破折号绑定

    我一直在互联网上搜索 试图找到一种方法 将表单元素中的破折号容纳到 MVC 2 3 甚至 4 中 ASP NET 控制器的默认模型绑定行为中 作为一名前端开发人员 我更喜欢 CSS 中的破折号 而不是驼峰命名法或下划线 在我的标记中 我想要
  • 客户无需离开您的网站即可使用 Paypal 进行付款

    我的客户给我这个链接https www paypal com webapps mpp compare business products https www paypal com webapps mpp compare business p
  • 使用任务时出现意外的线程中止异常。为什么?

    我有一个在应用程序域中运行的控制台应用程序 应用程序域由自定义 Windows 服务启动 该应用程序使用父任务来启动多个有效的子任务 当计时器寻找新工作时 在任何给定时间都可能有许多父任务和子任务一起运行 所有父任务的句柄位于任务列表中 s
  • 我必须实现哪些方法才能重新排列 UITableView 行?

    对于使用名为 rows 的字符串 NSMutableArray 的简单示例 我必须在表控制器中实现什么才能移动 tableView 行并将更改反映在我的数组中 我们在这里做繁重的工作 void tableView UITableView t
  • Flutter中JSON序列化和反序列化为对象

    由于 Flutter 从其 SDK 中删除了 dart 镜像 因此不再可能使用 dartson 等库进行 JSON 对象序列化 反序列化 不过 我读到built value 是实现类似目的的另一种方法 我找不到任何关于如何实现它的好例子 因
  • 所有小部件上的 Flutter 工具提示

    有没有办法设置tooltip on a Text widget new Text Some content tooltip Displays a message to you 这是行不通的 然而它确实有效 因为这里提到 https docs
  • 使用 GNU Make 将多行变量输出到文件

    我很难编写在文件中输出多行变量的 makefile 规则 这是我的代码 define VAR1 dev d 755 endef define VAR2 test d 777 test2 d 777 endef VARS VAR1 VARS
  • 组件的 Angular 2 指令会覆盖 ng-content?

    我有一个名为 ButtonComponent 的组件 import Component from angular2 core Component selector btn template div class btn div
  • 将 subprocess.Popen (shell=True) 与 Windows 文件夹一起使用

    我目前正在看Popen自动压缩和存储文档 对于压缩部分 我想到了以下Python行 subprocess Popen WinRAR exe a r c 03 Notes AllTexts txt shell True 我不断收到错误消息 因
  • Linkedin API - 按关键字搜索帖子

    我尝试通过 Linkedin API for PHP 将我的 Web 应用程序与 Linkedin 连接 有什么方法可以使用这个通过关键字搜索人们的出版物吗 如果可以的话 我还没有找到方法 我认为他们没有这种本机 所以他们可以避免报废 您可
  • 使用 Angular、node.js 和身份提供商进行 SAML 身份验证

    我想使用 SAML2 实现 SSO 但我不知道如何让它与分布式系统一起工作 其中每个实例都在自己的服务器上独立运行 该环境由三个实例组成 实例 1 有角度的前端 实例 2 node js 后端 使用express js Passport 实
  • Rails:如何安装 keywords.js?

    我想在我的应用程序上实现此功能 但我不知道如何安装它 您能否发布一步一步的信息 以便我了解要放置哪些文件 因为我尝试按照 github 页面上的说明进行操作 但没有成功 http vincentgarreau com articles js
  • 调用 Task.Result 时出现 ThreadAbortException

    我有以下代码 我尝试使用以下命令向远程端点发出请求HttpClient using var client new HttpClient client BaseAddress serviceBaseAddress Task
  • WCF - 网络成本

    我在 IIS 上部署了一个 wcf 服务 使用 basicHttpBinding 和 aspNetCompatibilityEnabled true 我还有一个测试客户端 它同时调用多个服务功能 为了检查客户端和服务器上服务调用的性能 我计
  • Angular 如何使用 rxjs 管道过滤可观察的数据

    我在服务文件中调用了一个名为 getWorkOrders 的方法 该方法又调用服务器来获取记录 这是我的服务 我正在使用新的 HttpClient export class BackendServices private BASE URL