问题标签 [rxjs-subscriptions]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
290 浏览

angular - 如何取消订阅角度参数更改的所有订阅

我正在开发可以显示作业的作业详细信息的页面,为此我使用 NGRX 存储来调度操作并订阅它以显示如下所示的数据

在 ngondestroy 中,我将取消订阅以下所有订阅,

这工作正常,但是我有带有作业列表的 sidenav 菜单,单击每个作业,作业详细信息页面更新单击作业详细信息。在这里,单击每个作业时,都会发生多次初始订阅,并且调度 API 会多次调用,因为我无法取消订阅以前的作业订阅。

如何在参数更改时取消订阅该特定组件中的所有订阅,或者以其他任何方式解决此问题。任何帮助将不胜感激,谢谢!!!

0 投票
1 回答
114 浏览

angular - RXJS 避免嵌套多个订阅

我想转换下面的代码片段:

通过避免嵌套订阅。我发现的所有示例都是按两次订阅计算的。

但这不是我的代码示例的正确解决方案。为什么修复多个嵌套订阅是正确的步骤?

0 投票
2 回答
575 浏览

angular - 在路由器订阅中调用订阅方法时,我是否应该取消订阅 ActivatedRoute?

我读到通常您不必取消订阅RouterActivatedRoute明确地取消订阅,因为:

ActivatedRoute 及其 observables 与 Router 本身是绝缘的。当不再需要路由组件并且注入的 ActivatedRoute 随之消亡时,Router 会销毁路由组件。

来源:我是否必须取消订阅 ActivatedRoute(例如 params)observables?

但是我在父组件subscribe()中反复调用。只有当用户离开 Web 应用程序或关闭网站时,该组件才会被销毁,所以我担心这些订阅可能会一直保持活动状态。ActivatedRoute.firstChild.paramMapapp.componentparamMap

订阅调用是在Router.events订阅中进行的,如下所示:

每次有人导航到另一个组件/页面activatedRoute.firstChild.paramMap时,都会再次订阅。我必须在路由器订阅中执行此操作,并且仅当事件是一个实例时才这样做,NavigationEnd因为在此之前 url 参数尚不可用。

我的问题是,这些订阅会发生什么?他们是自动退订还是我需要手动退订每个新的?如果是后者,我该如何有效地做到这一点?

你们中的一些人可能会建议我使用activatedRoute.firstChild.snapshot.paramMap.myParameter,因为这样我就不必订阅任何东西了。但是,snapshot当 url 参数更改而同一组件被重用时,它不起作用。所以我不能用那个。

谢谢

0 投票
1 回答
341 浏览

angular - Angular / DataTables:TypeError:无法通过 2 个 API 调用读取未定义的属性“aDataSort”

我花了几个小时试图解决这个问题,但我找不到适合我的情况的答案。

问题

我想在使用两个 API 调用组成的 DataTable 中显示数据。这些调用在服务中执行,然后数据作为主题发出。订阅主题的组件然后将数据显示在数据表中。

问题是数据表没有出现,我有一个错误:TypeError: Cannot read property 'aDataSort' of undefined. 当我的数据源来自单个 API 调用时,这个问题没有发生,我怀疑我担心的是数据表试图在加载数据之前实例化自己。我可以通过我有其他类型的错误来解决这个问题*ngFor,我宁愿不这样做。


简而言之,我的问题是:我做错了什么?


代码

这是我的代码的简化版本

api.service.ts

datatable.component.ts

datatable.component.html

环境

我希望我的问题不会太令人困惑,我真的不知道该怎么做才能解决这个问题......

非常感谢您的帮助!

编辑:修复缩进

0 投票
0 回答
27 浏览

angular - 导航到其他组件时出现 ObjectUnsuscribedError - Angular

您好,当我导航到应用程序的另一个组件时,我目前遇到了订阅问题。我处理订阅的方式是在一个数组上。

每次我必须订阅时,我都会将订阅推送到这个数组。

在我的 ngOnDestroy 方法中,我遍历这个数组并取消订阅每个订阅。

为了导航,我使用navigate()了角度路由器的方法。

我得到的错误如下: 在此处输入图像描述

需要考虑的是,在我的 ngOnDestroy() 方法中,在取消订阅之前,我有一个 console.log() 来表明我在那里。这甚至没有显示出来。提前致谢。

0 投票
2 回答
588 浏览

angular - Angular - http 拦截器 - http 速率限制器 - 滑动窗口

我有一个用例,我需要限制传出 http 请求的数量。是的,我在服务器端确实有速率限制器,但前端也需要对活动 http 请求的数量进行限制。因此,我正在尝试实现一个滑动窗口协议,在任何时候我都会只有 n 个活动请求。

这种使用 Rxjs 的方法通常可以正常工作,请参见此处: https ://jsbin.com/pacicubeci/1/edit?js,console,output

但我不清楚如何对 http 拦截器使用相同的逻辑。我在下面的尝试在编译时失败,并出现以下错误:

类型“订阅”缺少类型“可观察<HttpEvent>”中的以下属性:_isScalar、源、运算符、提升和 114 多个。(2740)

有了这个,我怎样才能返回一个 observable 并同时在 http 拦截器上维护一个队列?我的方法有缺陷吗?我可以使用http拦截器来限制http速率吗?

https://stackblitz.com/edit/angular-interceptors-npqkjp?file=app/interceptors.ts

0 投票
2 回答
163 浏览

javascript - *ngFor 根本不使用对象数组

我有 TS 代码

效果很好。当我 console.log(this.items) 我得到

布特。令人惊讶的是,当我在 html 模板中运行代码时,我以前从未在 Angular 中处理过

items =[{size:'XL',quantity:4}] 我一无所有。这真的很奇怪,因为我已经写了数百个这样的声明并且以前从未遇到过这个问题。请帮我。

解决了:

我发现用一个主题调用 getItems(),其中 getItems 方法返回一个主题“asobservable”只能在同一个组件中完成,直接在填充主题之后。在页面更改之前填充主题似乎仍然允许传输足够的数据以登录控制台,但不能被更大的应用程序使用。

所以因此做

有一个主题和

会起作用,但只有在同一个组件中直接相邻调用时。
因为在这种情况下,我正在更新主题、切换页面,然后调用主题,所以我遇到了一种奇怪的主题边缘,控制台仍然能够记录传递给主题的值,但没有完全解决由接收组件,因此无法与 *ngFor 一起使用。

正确的流程

哪里有行为主体和

在这种情况下,使用 BehaviorSubject 而不是 Subject 可以“按时”正确处理数据并与应用程序一起使用。谢谢大家的意见!

0 投票
1 回答
91 浏览

angular - Angular/RxJS:最大订阅数?

我正在创建一个指令,该指令根据用户的时区格式化日期。用户可以选择通过页面上的设置下拉菜单更新他们的时区。因此,该指令订阅时区更新和更改更新。

可能的问题是该指令可能会在一个页面上使用很多次,可能会使用 50 次,但有时可能会使用 200 多次。这意味着一次可能有 200 多个订阅。

这会导致一次更新大量元素的性能问题吗?我看不到任何文件可以建议任何一种方式。

0 投票
2 回答
196 浏览

angular - Angular 组件中的 RxJS 订阅

我不完全理解我需要在哪里以及如何在 Angular 组件中声明可观察对象/主题。

目前,我开发了一个与 MovieDB API 交互的网站,并且一切正常,但同时我知道我的代码很糟糕,因为在销毁组件后没有清理订阅,但是要进行这些清理,我需要最不了解如何正确使用 RxJS。

我认为我的用法不正确,因为我在每次与页面交互时都有新订阅。另外据我了解,它们需要在构造函数中声明。

这个页面的想法是有一个输入表单,用户可以在其中输入查询并检查单选按钮以选择要搜索的内容:“电视”或“电影”。当有搜索结果时,会出现一个按钮来展开结果。

所以,这里是代码:

和 HTML:

如果你能帮助我并告诉我哪里出错了,我将不胜感激。在更多的时间里,一切都以这种方式工作,但我想了解 RxJS 的用法。

输入输入并得到结果

扩展按钮

UPD @H3AR7B3A7 非常感谢你,你让我的知识有点清楚了!但现在我有另一个误解:如何将 2 个数组 observables 转换为一个?我用谷歌搜索,但找不到解决问题的方法:我有加载更多电影的功能 - 它必须扩展 distinctMovies$ 数组,它看起来就像一个数字(id)数组,但我不能加入两个数组,我得到的只是 [...], [...] 但不是 [......]

我试过这个:

0 投票
2 回答
67 浏览

angular - 在 Angular rxjs 中订阅

我有:

我知道在订阅中写订阅不是一个好的解决方案。如何解决?