如何使用 ngrx redux 和 angular2 从简单对象显示 属性
How do I display a property from a simple object using ngrx redux and angular2
我将 angular2 2.0.0-beta.2 与 ngrx store https://github.com/ngrx/store 一起使用,并使用 ngrx/store "counter" 示例的修改版本实现了一个简单的应用程序 github页。
在我的应用程序中,我有一个 "user" 对象,带有两个按钮 login 和 logout。我也有相应的 reducer 函数 login 和 logout ,其中我 return 带有包含名称 [=56 的对象的状态=] 或使用空对象...
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>
语法类似于 (user | async).name
- 参见 http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview
你也可以
<div *ngIf="user | async as userdata">
{{userdata.name}}
{{userdata.birthday}}
...
</div>
我将 angular2 2.0.0-beta.2 与 ngrx store https://github.com/ngrx/store 一起使用,并使用 ngrx/store "counter" 示例的修改版本实现了一个简单的应用程序 github页。
在我的应用程序中,我有一个 "user" 对象,带有两个按钮 login 和 logout。我也有相应的 reducer 函数 login 和 logout ,其中我 return 带有包含名称 [=56 的对象的状态=] 或使用空对象...
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>
语法类似于 (user | async).name
- 参见 http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview
你也可以
<div *ngIf="user | async as userdata">
{{userdata.name}}
{{userdata.birthday}}
...
</div>