web-dev-qa-db-fra.com

Comment mettre à jour la vue après avoir changé le modèle dans Angular?

Comment laisser Angular propager les modifications que j'ai apportées au modèle. Dans AngularJS, ce serait vraiment facile, mais je ne peux pas sembler le faire fonctionner dans Angular. Je connais tout le système de détection de changement et la propagation de la vue est entièrement modifiée. D'une manière ou d'une autre, j'ai besoin d'informer angular des changements. Mais comment puis-je faire cela dans la pratique?.

Voir ce morceau de code TypeScript:

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

Vous verrez qu'après le chargement des utilisateurs dans le modèle, la vue ne se met pas à jour.

J'utilise systemjs 0,16, angulaire 2.0.0-alpha.23.

Voir cet exemple pour l'exemple (actuellement, fonctionne uniquement en chrome, car la nouvelle API "fetch" est utilisée)

javascripttypescriptangular
9
nicojs

Pour mettre à jour les données affichées dans AngularJS2, vous devez utiliser Forms. Vous pouvez lire à ce sujet à cette page ou voir plus de détails ici . Si je comprends bien les formulaires, vous devriez modifier votre partie @View comme ceci:

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

--edited

Essaye ça:

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

Je ne suis pas sûr que ma réponse soit tout à fait correcte, mais je ne peux pas trouver plus d'informations. Expérimentez avec ce code et que la Force soit avec vous! :) 

Aussi, j'ai trouvé ce lien , very informatif.

Si je comprends bien, lorsque vous êtes dans le constructeur, vous devez initialiser votre variable users via new Control(some data), puis, dans le modèle de vue, vous pouvez accéder à ces données comme ceci: {{users.value}}. 

Si cela ne fonctionne pas: essayez la même chose mais avec des données très simples, par exemple. utilisez string au lieu d'un tableau.

Et cette vidéo aidera à comprendre les formes en ng2.

1
James Schermann

Je viens d'y répondre La vue Angular2 ne change pas après la mise à jour des données

Fondamentalement, il y avait un bug dans la version bêta 2.0.0-beta.1.

J'espère que ça aide!

0
Alan Wagner