Come aggiornare la vista dopo aver modificato il modello in Angular

Question

Come consentire a Angular di propagare le modifiche apportate al modello. In AngularJS questo sarebbe davvero facile, ma non riesco a farlo funzionare in Angular. So che l'intero sistema di rilevamento delle modifiche e la propagazione della vista sono completamente cambiate. In qualche modo, ho bisogno di informare angolare dei cambiamenti. Ma come posso farlo nella pratica.

Vedere questo pezzo di codice dattiloscritto:

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); 

Vedrete che, dopo gli utenti vengono caricate nel modello, la vista non aggiorna.

Sto usando systemjs 0.16, angular 2.0.0-alpha.23.

See this plnkr for the example (attualmente, funziona solo in cromo, come viene utilizzato il nuovo 'prendere' api)

Answer 1

ho trovato il problema. Apparentemente, è un bug da correggere in alpha 27. Vedi questo bug report: https://github.com/angular/angular/issues/1913

Angular2 usa zonejs per sapere quando avviare il ciclo di digest (lo sporco controlla e aggiorna la vista). A partire da ora, zonejs non viene attivato dopo aver recuperato i dati con la nuova window.fetch().

Sostituzione della finestra [ 'prendere'] linea a questa Risolto il problema per me: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

Answer 2

per aggiornare i dati in vista AngularJS2 si dovrebbe usare Forms. Puoi leggere questo a questo page o vedere ulteriori dettagli here. Se ho capito bene Forms, è necessario modificare yout @View parte in questo modo:

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

--edited

Prova questo:

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); 

Non sono sicuro che la mia risposta è completamente corretta, ma non riesco a trovare più informazioni. Sperimenta con questo codice e la Forza potrebbe essere con te! :)

Inoltre ho trovato this link, molto informativo.

Se ho ben capito, quando nel costruttore si dovrebbe inizializzare sei variabile users via new Control(some data) e poi, nel modello di vista è possibile accedere a questi dati come questo - {{users.value}}.

Se non funziona: prova lo stesso ma con dati molto semplici, ad es. usa una stringa invece di una matrice.

E this video contribuirà a rendere non invariato i moduli in ng2.

Answer 3

I prefissi Ng sono tornati. For è ora diventato ngFor per versioni Angular2 alfa-24 +.

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

Quindi utilizzare *ng-for=#user of users" nel modello.

Checkout la ngFor docs o a working example

Answer 4

appena risposto qui Angular2 View Not Changing After Data Is Updated

In sostanza, c'era un bug in versione Beta 2.0.0-beta. 1.

Spero che aiuti!