NgRx访问状态存储上的数据

时间:2020-02-20 12:25:36

标签: angular redux state store ngrx

我的状态包含用户数据(姓名,电子邮件等)。

在component.ts中,我正在使用以下命令访问状态: this.user$ = store.pipe(select(fromUser.getUser))

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

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

3 个答案:

答案 0 :(得分:0)

使用async pipe

rws3270429.us.oracle.com

答案 1 :(得分:0)

您需要通过// component.html <span> Hello {{ (user$ | async).name }}! </span> 管道进行订阅,然后获得名称:

async

答案 2 :(得分:0)

很难看到没有任何代码,但是好像您没有订阅它。

由于您在属性名称中使用了Sub Demo() Application.ScreenUpdating = False Dim StrFnd As String, i As Long With ActiveDocument.Range With .Find .ClearFormatting .Replacement.ClearFormatting .Text = "\(*[^34][!\)]@[^34]*\)" .Replacement.Text = "" .MatchWildcards = True .Wrap = wdFindStop .Forward = True .Format = False .Execute End With Do While .Find.Found i = i + 1 StrFnd = StrFnd & vbCr & Split(.Text, """")(1) .Collapse wdCollapseEnd .Find.Execute Loop End With Application.ScreenUpdating = True MsgBox i & " instances found:" & StrFnd End Sub 约定,因此您似乎知道自己正在从NgRx存储中获取可观察到的东西。不过,直到您订阅该功能,该功能才会执行。

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

component.ts文件

async

component.html文件

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

上述带有'async'管道的方法使您可以使用别名,并在整个模板中更轻松地引用observable属性。这种使用带有别名的容器元素的方法只能在您的<div class="wrapper" *ngIf="user$ | async as user"> <p>{{ user.name }}</p> </div> 可观察对象上建立一个订阅。

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