How to update a view after changing a model in Angular

Question

How do I let Angular spread the changes I made to the model. In AngularJS, that would be very simple, but I can't get it to work in Angular. I know that the whole change detection system and view propagation are completely changed. Somehow I need to inform Angular about the changes. But how can I do this in practice.

See this piece of typescript code:

import {Component, View, bootstrap, For} from 'angular2/angular2'; // Annotation section @Component({ selector: 'app' }) @View({ template: ` <div *for="#user of users"> {{user}} </div> `, directives: [For] }) class App { users:Array<String>; constructor() { this.users = []; this.fillUsersAsync(); } fillUsersAsync(){ window['fetch']('http://jsonplaceholder.typicode.com/users') .then( resp => resp.json()) .then( users => users.forEach(user => this.users.push(user.name))) .then( () => console.log('Retrieved users and put on the model: ', this.users)); } } bootstrap(App); 

You will see that after loading users into the model, the view is not updated.

I am using systemjs 0.16, Angular 2.0.0-alpha.23.

See this plnkr for an example (currently only works in chrome since the new 'fetch' api is used)

Answer 1

I found a problem. Apparently, his bug is fixed in alpha-27. See this error report: https://github.com/angular/angular/issues/1913

Angular2 uses zonejs to know when to start the digest cycle (dirty checking and updating the view). Currently zonejs does not start after retrieving data using the new window.fetch ().

Replacing the string ['fetch'] in this case fixes the problem: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

Answer 2

To update the data on the screen in AngularJS2, you must use Forms . You can read about it on this page or in more detail here . If I understand Forms correctly, you should change the yout @View part as follows:

 @View({ template: ` <div *for="#user of users" control="users"> {{user}} </div> `, directives: [For] }) 

- edited

Try the following:

 import {Component, View, bootstrap, For} from 'angular2/angular2'; // Annotation section @Component({ selector: 'app' }) @View({ template: ` <div [control]="users" *for="#user of users"> {{user.value}} </div> `, directives: [For, forms] }) class App { users:Array<String>; constructor() { this.users = new Control([]); this.fillUsersAsync(); } fillUsersAsync(){ window['fetch']('http://jsonplaceholder.typicode.com/users') .then( resp => resp.json()) .then( users => var usersArr = [] users.forEach(user => usersArr.push(user.name)) this.users = new Control(usersArr)); } } bootstrap(App); 

I am not sure that my answer is absolutely right, but I can not find more information. Experiment with this code, and Strength may be with you! :)

Also I found this link , very informative.

As I understand it, when in the constructor you have to initialize the youre users variable using new Control(some data) , and then in the view template you can access this data as follows: {{users.value}} .

If this does not work: try to do the same, but with very simple data, for example. use a string instead of an array.

And this video will help not to give out forms in ng2.

Answer 3

Just answered here Angular2 View doesn't change after data update

Basically, there was a bug in Beta 2.0.0-beta.1.

Hope this helps!

Answer 4

NG prefixes are back. For now become ngFor for Angular2 alpha-24 + versions.

 import {NgFor} from 'angular2/directives'; @View({ directives: [ngFor] }) 

Then use *ng-for=#user of users" in the template.

Checkout ngFor docs or a working example