问题标签 [async-pipe]

在 Angular (v12) 中，我有以下组件（使用虚拟变量名称）：

及其模板：

数据没有被渲染，如果我实际上没有订阅data$. 另一方面，当我做 place 时this.data$.subscribe();，控制台得到正确的输出，但视图仍然是空的（挂在Loading...上）。

谁能解释发生了什么？

我有以下代码：

当我简单地订阅和 console.log 时：

然后，它在那里将所需的列表输出到控制台。但在我的 HTML 文档中，我有以下代码：

然而，无论项目 observable 返回什么，angular 只显示加载组件。我究竟做错了什么？

谢谢！

我正在通过角度 11 中的异步管道订阅延迟的 observable。

由于某种原因，变化检测（？）不会稳定，管道不会接收到值，我不知道为什么？它没有显示我的数据，而是显示null.

示例：https ://stackblitz.com/edit/angular-async-pipe-with-delay?devtoolsheight=33&file=src/app/app.component.html

html

零件

服务

I have this class binding which should animate my image while loading, but it never trigger.

<img [class.animated]="loader.isLoading$ | async" src="...">

Loader :

Using vanilla javascript works (so I guess the Loader code is fine) :

edit : The class binding works without the delay(250), why ?

Where am I doing wrong with the class binding ? Even with ChangeDetectionStrategy.Default it doesn't work.

Thanks for any explanation.

我有一个角度项目，在我的组件中，我使用 graphql 获取数据，并在 HTML 中显示结果的图像。但是有一会儿，我在控制台中收到了这个错误：

这是我的html代码：

在我的组件中，我有：

现在，我怎样才能避免这个错误？

我有这个组件StackBliz

模板：

班级：

我想减少页面上的订阅数量。

我尝试将内容包装到 中ng-container，但这没有用。

首先，我在模板中遇到错误[opened]="isHandset === false"，其次是ng-container制动视图，所以即使我离开，也[opened]="(isHandset$ | async) === false"没有显示任何内容

任何想法如何解决我上面描述的所有两个问题？

我在组件中使用这个 observable

管道按预期工作：轮询结果，直到不再有状态设置为“处理”的项目

这是在模板中使用管道的方式

即使轮询结束，模板状态也不会更新（我看到控制台日志的所有项目的状态都设置为“已完成”或“未处理”）。

我错过了什么？

我最近正在处理的项目升级到 AOT 合规性，自从那件事发生后，我| async在 HTML 中使用管道时遇到了问题。例如，我的 HTML 代码如下所示：

如您所见，这mySubscription$是一个订阅，我只是想使用异步管道对其执行一个简单的操作。此代码一直在工作，但自从 AOT 更新后，它停止工作并引发以下错误：

我浏览了多个帖子，并且已经尝试commonModule按照其他帖子中的建议添加到我的应用程序中，但到目前为止还没有运气。另外，我在这里从 Angular 官方网站上看到了这个文档：https ://angular.io/guide/template-typecheck但这似乎也不起作用。声明可观察的方式，看起来像

同样，所有这些问题都是在启用 AOT 和 IVY 之后开始的。

现在，经过进一步调查，我认为我确信CommonModule在应用程序中加载的方式存在一些问题，如此处所述：找不到管道“异步”

但是我在我的 App.Module、我的路由模块和我的功能模块中引用了 Common 模块。我还在应用程序中找到了其他组件，其中加载并使用了通用模块，| async但听起来只有我的组件有问题。

另外，我注意到的另一件事是我的应用程序第一次加载良好，总是重新编译导致模块加载问题。现在我不确定第一次编译和重新编译之间有什么区别，可能是加载模块的顺序吗？但在这一点上，我不确定是什么特别导致了它？

我在模板中使用异步管道来获取符合特定条件（getNonRedirectingList）的用户列表。用户存储在 Firestore 实例中。

在我的组件模板中，我有以下（简化的）代码：

这就像一个魅力：它产生 3<div>个块，与我期望的 3 个用户匹配。

但是在 Typescript 代码中，我还需要订阅返回的相同Observable内容@angular/fire

我期待

作为控制台中的输出，但我什么也没得到。即使在该行设置断点console.log(i)，它也永远不会被击中。

我已经尝试过使用和不使用.pipe(share())，我也尝试过调用getNonRedirectingList两次以希望得到两个不同的Observable，我也尝试过使用subscribe()andunsubscribe()而不是firstValueFrom()，但结果是一样的：异步管道工作，我的代码做了不是。

在 S Overflow 回答后编辑：

这个也试过了，结果一样

有什么线索吗？

所以我正在听一个路由参数：

...我正在用异步管道打开它...

我正在使用ChangeDetectionStrategy.OnPush，并希望继续这样做

每当组件首次初始化时，这非常有用。

但是，如果我使用角度路由器来提供不同的路由参数（当组件仍在加载时）：

那么searchResult$observable 永远不会未定义，else loading也永远不会被调用。新列表只是替换旧列表，而不向用户指示正在加载。

是否有一种 OnPush 友好的方式来获取加载模板以显示路由 paramMap 可观察对象何时提供新值？

我已经尝试回到默认更改检测并将一堆tap(() => this.isloading = true;)放入我的可观察组合中 - 但我不想这样做，我想看看我是否可以在使用 OnPush 更改检测时做到这一点。

StackBlitz 这里