NgRx 访问 State Store 上的数据

Question

我有用户数据（姓名、电子邮件等）的状态。

在 component.ts 我正在访问状态： this.user$ = store.pipe(select(fromUser.getUser))

我正在尝试访问位于 component.html 的 {{ user$.name }} 我已经尝试通过使用订阅方法的调用来执行此操作并且有效，但我正在尝试使用 store.pipe(select)

可能打错电话了？还是我做错了？

Answer 1

// 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' 管道的上述方法允许您使用别名并更轻松地在整个模板中引用 observable 属性。这种使用带有别名的容器元素的方法只会在您的 user$ observable 上建立一个订阅。

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

NgRx Accessing Data on State Store