问题标签 [async-pipe]

我已经看到了一些与此类似的问题，但我仍在努力解决我在特定应用程序中遇到的错误。我正在使用 NgRx 和 Angular。

.html 文件

• 在组件的.html文件中，我有如下内容。我曾经async从selectedOverlayLayers$observable 中获取最新值。正如您可能已经猜到的那样，这个想法是抓取用户选择的图层并将它们显示在列表中。
• alterLayers()打开一个对话框，用户可以在其中更改“选择”哪些图层

组件.ts 文件

• component.tshasselectedOverlayLayers$从 NgRx 存储中获取所选图层值的数组，如下所示：

• 该组件还控制打开对话框并使用从显示给用户的对话框中收集的结果，用户可以在其中选择他们想要查看的图层。一旦用户点击提交，我们使用result触发一个用新值更新 store 的操作。

问题：

• 使用表示所选图层的新列表的新数组正确更新存储
• 但是，直到我单击组件本身中的选项卡或其他内容后，UI 才会更新，然后才会在列表中正确显示层。

我尝试添加private ngZone: NgZone到构造函数并运行this.ngZone.run(() => this.store.dispatch(updateSelectedOverlayLayers({ selectedLayers: result })，但这对我不起作用。

我有一个FormGroup，我们称之为它groupForm，它包含一个控件，它是一组单选按钮：

我有BehaviorSubject一个服务，我想用它来设置该组的默认值。我想用一根async管子来做。所以在我的模板中我做了这样的事情：

然后，在同一个模板中，我使用 groupForm 的有效性来启用按钮。

问题是，尽管在 UI 中显示选择了正确的单选按钮，但表单仍然无效并且按钮显示为禁用。我在代码中尝试了以下解决方法：

它奏效了。但我想知道我是否遗漏了什么，我可以避免使用这种解决方法。

先感谢您。

我对async-pipe 与Observable在OnInit. 必须是关于OnInit发生的时间点以及模板被渲染并因此Observable被订阅的时间点的时间问题。

考虑这个组件：

和模板：

这导致

这意味着：即使在subjectA$中获得了值onInit，视图也不会更新。如果我在 a 中创建第一个值，setTimeout如您所见subjectB$，它可以工作并且我看到了值。虽然这是一个解决方案，但我想知道为什么会发生这种情况，是否有更好的解决方案？

我已经找到的一个解决方案是使用BehaviorSubject提供第一个值作为初始值：

与subjectC的类似模板导致subjectC: C。

在 StackBlitz 上尝试一切。

我真正的 observable 根本不是Subject，而是combineLatest不同东西的 -call 的结果，其中只有一个是（不幸的是，因为它使用来自@Input()-annotation 的值） a Subject，并像示例next中一样手动推送OnInit. 其余的来自http等人。很可能我可以将组合结果包装在 a 中，BehaviourSubject但它对我来说看起来既丑陋又危险，所以它比这种setTimeout方法更糟糕。但我敢打赌，有人可以帮助我并找到一个真正有用的解决方案。另外，我宁愿避免BehaviorSubject使用getValue.

参见 Stackblitz

我正在尝试使用 ngrx 制作语言管道。

组件.html：

语言管道：

我的问题是，如果我更改组件中的 languageId，那么管道将从商店中选择一个新的 Observable，但是异步管道会取消订阅以前的 Observable，还是我必须手动执行？

大家好，我正在尝试在 html 文件中使用数据对象，并且我正在使用异步管道和主题来发出 id 并获取服务器响应。
这是我的代码：

我在视图中使用异步管道来订阅结果。

现在我想要这种行为：我从多个位置发出带有 id的getDetails$ 。
然后我需要在服务器调用空值之前将结果发送到视图，然后在延迟一段时间后服务器响应（LogDetails 对象）。

1. 发送结果的默认值
2. 延迟
3. 发送服务器响应

我可以使用运算符来实现这一点吗？

我的 compomnet.tx 文件有一些商店订阅方法，如下所示。

它们通常被声明为变量。但是我需要从他们那里获取这个当前值并将其传递给同一个 .ts 文件中的另一个方法。

我需要一些专家的帮助来解决这个问题。我更喜欢我可以删除这个只读的东西并将其分配给直接变量，并在 Html 文件中使用它。目前，我使用异步管道获取价值，{ selectedId$ | async }

offer$ observable 正在通过异步管道和 *ngfor 推送到子组件。当它通过发布请求更新时，不会在 DOM 上呈现更改。如果我使用一个数组并订阅获取使用异步管道的请求，它可以工作......不知道为什么。

应用组件.ts

html

子组件

谢谢

我正在开发一个 Angular 项目，但遇到以下问题。

基本上我有这个HomeComponent视图代码：

下面是相关的 TypeScript 代码：

正如您在前面的代码中看到的组件初始化首先我使用服务类的loadedAllCourses()方法检索一个Observable（它只是向API 执行一个HTTP 请求），然后从这个Observable 我创建另外两个Observable，它们是beginCourses $和advancedCourses$包含两种不同类型的课程过滤检索到的课程 Observable。

在我的HomeCompoent视图中，我声明了 只显示课程信息的课程卡列表组件，如下所示：

和：

这是课程卡列表组件的视图代码：

这是相关的后端代码：

问题是在运行我的应用程序时，我收到以下似乎与两个异步管道相关的错误消息：

怎么了？我错过了什么？我该如何解决这个问题？

EDIT-1 : * 这是我的服务类代码：

如您所见，loadedAllCourses()方法返回一个 Observable，因此我使用异步管道将其“订阅”到 HomeComponent 中，以检索我试图传递给子组件的课程数组

我正在创建我的第一个 Angular 应用程序，但我正在努力解决可观察的问题（惊喜、惊喜）。我的 HTML 标签中有这个：

我尝试将异步管道与我的 observable 一起使用。为了更新我的 observable 的值，我进行了一些 REST 调用（在用户单击按钮后），这是我处理单击的方式：

我试图重现此处描述的行为：https://malcoded.com/posts/angular-async-pipe/ 我如何理解我的代码中发生的事情：从 REST 调用获取响应正文后，我更新了下一个值，其 behaviorSubject 将具有. 然后我创建一个新的 observable，下一个值已经设置为我想要的响应。然后我用 HTML 更新我的 observable。应该重新加载 HTML（因为它会监听值的变化和我的 observable 的值刚刚改变）。我的 REST 调用中的新值应该在 HTML 中可见。我错过了什么？

我发现使用异步管道和在模板中手动订阅 observable 之间存在差异，我还没有在任何讨论这些方法之间差异的文章中看到这种差异。

假设我有一个带有 observable 的组件，它侦听重新加载主题@Input() reload = new ReplaySubject<void>(1)（父组件是所有详细组件的列表。

首先，使用 subscribe() 方法，如果 fetch 请求出错，该方法订阅的 observable 也会出错，从而完成并停止发出值。这是意料之中的。如果我将路线更改为不同的细节，重新加载主题会发出，但可观察的组件已完成，因此它不执行任何逻辑：

但是，当我改用异步管道方法时，错误后切换路由会获取新值，就好像异步管道在可观察到的错误输出后再次订阅一样。

...

异步管道是如何做到的？是因为 changeDetection （使用默认值）每个周期都重新订阅异步管道吗？或者异步管道是否使用某种“重试”逻辑？