如何使用ngrx redux和angular2从简单对象显示属性

Question

我正在使用angular2 2.0.0-beta.2 和ngrx商店https://github.com/ngrx/store,并在ngrx/store github页面上使用"counter"示例的修改版本实现了一个简单的应用程序.

在我的应用程序中,我有一个"用户"对象,其中有两个用于登录和注销的按钮.我还有相应的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>

这是关键词:http://plnkr.co/edit/cPubI9upph344qrOqtj8？p =preview

Answer 1

语法看起来像(user | async).name- 请参阅http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview