如何使用 ngrx redux 和 angular2 显示来自简单对象的属性答案

【问题标题】：How do I display a property from a simple object using ngrx redux and angular2如何使用 ngrx redux 和 angular2 显示来自简单对象的属性
【发布时间】：2016-05-21 16:10:30
【问题描述】：

我将 angular2 2.0.0-beta.2 与 ngrx 商店 https://github.com/ngrx/store 一起使用，并使用 ngrx/store github 页面上“计数器”示例的修改版本实现了一个简单的应用程序。

在我的应用程序中，我有一个“用户”对象，其中包含 login 和 logout 两个按钮。我也有相应的 reducer 函数 login 和 logout 在其中我可以使用包含 name 属性的对象或空对象返回状态...

export const user: Reducer<any> = (state: any = {}, action: Action) => {

    switch (action.type) {
        case LOGIN:
            return {name: 'jdoe'};

        case LOGOUT:
            return {};

        default:
            return state;
    }
};

这不会更新：

<h2>User Name = {{ user.name | async }}</h2>

...当我单击登录按钮时它仍然是空白的，但是当通过“json”管道传输时，我看到对象确实发生了变化...

这确实更新了

{{ user | async | json }}

...输出 { "name": "jdoe" } 但显然这对我没有好处。简单地使用 {{ user.name | async }} 不起作用并保持空白。

模板：

<div>
    <h2>User Name = {{ user.name | async }}</h2>
    <button (click)="login()">login</button><button (click)="logout()">logout</button>
</div>
<hr>
<div>
      {{ user | async | json }}
</div>

这里是 plunker： http://plnkr.co/edit/cPubI9upph344qrOqtj8?p=preview

【问题讨论】：

标签： angular redux ngrx

【解决方案1】：

你也可以这样做

    <div *ngIf="user | async as userdata">
     {{userdata.name}}
     {{userdata.birthday}}
     ...
    </div>

【讨论】：

【解决方案2】：

语法类似于(user | async).name - 请参阅http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview

【讨论】：

太棒了，成功了！我不熟悉那种语法，谢谢！
如果我需要在模板之外访问 user.name，例如在函数中，我该怎么办？
哇，这应该在某个地方的文档中显着显示——花了几个小时弄清楚为什么我的属性不会显示在屏幕上。谢谢！终于通过这个语法解决了这个问题。