如何使用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

Answer 2

你也可以這樣做

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