NgRx访问状态存储上的数据

Question

我的状态包含用户数据（姓名，电子邮件等）。

在component.ts中，我正在通过以下方式访问状态：this.user$ = store.pipe(select(fromUser.getUser))

而且我正在尝试访问component.html上的{{ user$.name }}我已经尝试通过使用subscription方法的调用来做到这一点，并且可以使用，但是我正在尝试使用store.pipe(select)

也许打错电话了？还是我做错了？

Answer 1

使用async pipe：

// component.html
<span> Hello {{ (user$ | async).name }}! </span>

Answer 2

您需要通过async管道进行订阅，然后获得名称：

 {{ (user$ | async)?.name }}

Answer 3

很难看到没有任何代码，但是看起来您没有订阅它。

由于您在属性名称中使用了$约定，因此您似乎知道您正在从NgRx存储中获取可观察到的东西。不过，该功能要等到您订阅后才能执行。

有两种订阅方式。您可以显式订阅您的component.ts文件（不建议使用，因为您必须手动管理订阅），也可以在模板中使用async管道。 async管道将为您管理订阅。

component.ts文件

this.user$ = store.pipe(select(fromUser.getUser))

component.html文件

<div class="wrapper" *ngIf="user$ | async as user">
   <p>{{ user.name }}</p>
</div>

上述带有'async'管道的方法使您可以使用别名，并更容易在整个模板中引用可观察的属性。这种使用带有别名的容器元素的方法只能在您的user$可观察对象上建立一个预订。

需要记住的是，每次使用async管道时，它都会创建一个新的可观察对象。如果您不仅需要引用name属性，还应遵循上面示例中的包含元素模式。这样，您可以在一个订阅中引用用户对象上的所有属性。