[英]How do I display a property from a simple object using ngrx redux and angular2
I'm using angular2 2.0.0-beta.2 with ngrx store https://github.com/ngrx/store and implemented a simple app using a modified version of the "counter" example on the ngrx/store github page. 我正在使用angular2 2.0.0-beta.2和ngrx商店https://github.com/ngrx/store,并在ngrx / store github页面上使用“counter”示例的修改版本实现了一个简单的应用程序。
In my app, I have a "user" object with two buttons for login and logout . 在我的应用程序中,我有一个“用户”对象,其中有两个用于登录和注销的按钮。 I also have the corresponding reducer functions login and logout where I either return the state with an object that includes a name property or with an empty object...
我还有相应的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;
}
};
This doesn't update: 这不会更新:
<h2>User Name = {{ user.name | async }}</h2>
...It remains blank when I click the login button, but when piped through the 'json' pipe, I see that indeed the object has changed... ...当我点击登录按钮时它仍然是空白的,但是当通过'json'管道传送时,我看到确实对象已经改变了......
This does update 这确实更新了
{{ user | async | json }}
...which outputs { "name": "jdoe" } but obviously that does me no good. ...输出{“name”:“jdoe”}但显然这对我没有好处。 Using simply {{ user.name |
简单地使用{{user.name | async }} doesn't work and remains blank.
async}}不起作用并保持空白。
the template: 模板:
<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>
Here's the plunker: http://plnkr.co/edit/cPubI9upph344qrOqtj8?p=preview 这是关键词: http ://plnkr.co/edit/cPubI9upph344qrOqtj8?p =preview
语法看起来像(user | async).name
- 请参阅http://plnkr.co/edit/OVHh9lHvTU4sKrCbrLqq?p=preview
You could also do 你也可以这样做
<div *ngIf="user | async as userdata">
{{userdata.name}}
{{userdata.birthday}}
...
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.