问题标签 [async-pipe]

我正在开发一个 Angular 应用程序。问题是我的模板annonces在相应组件中对变量 ( ) 的请求返回其值之前显示。所以我必须使用async管道。我尝试使用它，但模板中的变量没有刷新，并且我没有*ngFor指令的结果

这是组件

模板部分如下：

服务如下：

我有以下代码：

两者offline()并scanning()返回Observable<boolean>。
我不确定async在 的情况下如何使用管道，scanning()对于offline().

我似乎无法从子组件触发父组件的异步管道来更新视图。这可能听起来有点令人困惑，但让我尝试通过显示我的代码的简化版本来解释。

如果有一个由另一个类扩展的类。

使用如下所示的模板：

扩展：

模板未在浏览器中更新。如果我在父组件中使用 subject$.next 调用该行，它将按预期更新并在浏览器中显示这两个字符串。

因此，我尝试通过延迟 3 秒调用 SetTimeOut 来尝试使用它，以查看是否以某种方式将其调用为快速。这并没有解决问题。我还将 subject$.next 添加到父级的函数中，然后从子级调用该函数，这也无法解决。但是，如果我在父类中调用相同的新函数，则视图会按预期更新。

我还在父级中添加了一个自定义订阅，它像这样监听主题 $：

这将按预期触发，但浏览器中的视图未使用值“string1”、“string2”更新。

我在这里错过了什么吗？

（编辑）添加 StackBlitz：https ://stackblitz.com/edit/angular-tt65ig

我进行异步服务调用以获取元素列表。

当我收到元素列表（我订阅了服务调用）时，我根据元素列表构建表单组。在模板中，我有一个 *ngIf 来绘制仅当列表大于零时。

由于 elementList 是异步获取的，所以这个 ngIf 不起作用。我读过我可以将 ngIf 与 AsnycPipe 一起使用。所以在模板中我会有：

其中 elementList$ 是服务调用返回的 Observable。

我想知道收到 elementList 后如何创建 FormGroup。首先我需要创建 FormGroup，然后模板应该调用 *ngIf 来绘制元素。

当在 Angular 中使用不立即触发事件的异步管道时（http 请求或任何可观察到的延迟），得到第一个值null 为什么会发生？如何避免这种情况？

第一个变化：

第二个变化：

stackblitz 示例： https ://stackblitz.com/edit/http-async-pipe-crxm32

我在异步管道中有一个小问题这是我的情况，我需要在 html 的异步管道中运行嵌套的 observables，因为我使用推送策略并且我不想使用一些变通方法或更改检测器参考。我的问题是，当我运行下面的代码时，只调用第一个 observable 我应该添加返回语句吗？或者是什么问题？

TS代码

html代码

<div *ngFor=let user of users$ | async> </div>

我想将 res.data 分配给 user.data 但结果只是 res.data 并且它忘记了用户对象有什么建议吗？

我花了大约 3 天的时间试图弄清楚这一点。

预期行为：材料表始终使用来自后端的最新数据进行渲染。当从单独的组件将新项目添加到表中时，重定向到页面的路由器会显示更新的数据。

实际行为：第一次导航到页面时，表格为空。呈现了表，呈现了列标题，但没有填充行。导航离开然后返回正确填充表格。向表中添加新项目时，服务会将项目发送到后端，然后调用所有项目。然后该服务更新存储（另一个服务）。在重定向到表格组件时，表格似乎快速刷新旧数据，然后再次显示为空白。一旦我离开并返回，表格就会正确加载。

我正在使用下面的异步管道和服务。这对我来说似乎不正确......此外，ngOnChanges 没有记录任何内容。

appStore.service.ts

appDispatch.service.ts

petTableComponent.component.ts

petTableComponent.component.html

编辑 我尝试根据请求更改以下内容，结果与以前完全相同。

宠物表.component.ts

我将数据源更改为[dataSource]="data"

没有把握...

我有一个异步管道，它与提供者连接以向 aws translate 发出翻译请求，然后返回一个承诺。我有一个“关于”页面，在此页面中显示了在英语和西班牙语之间选择语言的选项我将值存储在存储中，然后我将其推送到一个事件以告诉翻译提供者更新“语言”变量，这样在异步管道中，如果语言是西班牙语的“es”，它将向 aws translate 发出请求，否则它将返回默认值；

问题是在这种情况下，当语言更改时，如何重新呈现“关于”页面，因为它不是组件值更改，我如何仅重新呈现页面，以便管道可以翻译“关于”html 文本？

管道完美运行，只是不知道当用户在那一刻更改语言时如何重新加载它。

关于我需要翻译的页面部分

选择语言方法

我想并尝试了 NgZone 但我将在回调中运行什么？

编辑：

翻译.pipe.ts

我在使用 Angular Async Pipe 时遇到问题。根据从后端收到的内容，使用 ngFor 在模板中显示的内容的顺序不同的问题。

这是代码：

我创建了一个名为 header-component 的组件，它接收一个可观察的 headers$ 作为输入参数。

在导入标头组件的父组件内

headers$ = this.httpClient.get(this.configService.config.bay.****, option);

实际上，我从后端收到的 JSON 的属性按以下顺序排列：

• 节点：“*****”
• idSistSbar：“*****”
• idSezione：“***”
• 斯巴拉：“**”
• 状态：“******”
• 进步：“*”

但是 header-component 中显示的随机顺序与我们从后端实际收到的随机顺序非常不同。

如何以从 BackEnd 收到的相同顺序显示 header-component 内的 JSON 属性？

非常感谢