Как показать свойство из простого объекта с помощью ngrx redux и angular2

Question

Я использую angular2 2.0.0-beta.2 с магазином ngrx https://github.com/ngrx/store и реализовал простое приложение с использованием модифицированной версии примера «счетчик» на страница ngrx/store github.

В моем приложении, у меня есть «пользователь» объект с двумя кнопками для входа и логаута. У меня также есть соответствующие функции редуктора Войти и выход из системы где я либо вернуть государству объект, который включает в себя свойство имени или с пустым объектом ...

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 }} 

... который выводит { "имя": "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

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>