web-dev-qa-db-fra.com

Angular 2 ne pas actualiser la vue après le tableau Annonce Push in ngOnInit

J'ai créé une application NativeScript avec Angular 2, j'ai un tableau d'objets que je m'attends à voir dans le front-end de l'application. le comportement est que si i Pousser un objet dans le tableau directement à l'intérieur de ngOnInit () cela fonctionne, mais si je crée une promesse dans ngOnInit (), cela ne fonctionne pas. voici le code:

export class DashboardComponent {
     stories: Story[] = [];

     pushArray() {
         let story:Story = new Story(1,1,"ASD", "pushed");
         this.stories.Push(story);
     }

     ngOnInit() {
         this.pushArray(); //this is shown

         var promise = new Promise((resolve)=>{
             resolve(42);
             console.log("promise hit");
         });

         promise.then(x=> {
             this.pushArray(); //this is NOT shown
         });
     }
 }

le html relatif est: 

<Label *ngFor="let story of stories" [text]='story.message'></Label>

lorsque l'application démarre, je ne vois qu'un seul Push, mais j'ai créé un bouton qui déclenche un "console.log (JSON.stringify (this.stories)));" et à ce moment-là, lorsque je touche le bouton, l'interface utilisateur semble détecter le tableau modifié et l'autre objet inséré apparaît.

EDIT:

J'ai créé un exemple plus simple dans ce fil de discussion: Angular 2: lorsque je change une variable dans une promesse. Que dans ngOnInit, la vue n'est pas actualisée

angularnativescriptes6-promiseangular2-nativescript
11
Andrea Veronesi

La détection de changement est basée sur des références, et le fait de pousser un élément dans un tableau ne le déclenchera pas. Essayez de mettre à jour la référence comme ceci:

this.stories.Push(story);
this.stories = this.stories.slice();
16
nickspoon
        setTimeout(function () {
            this.stories.Push(story);
        }, 0);

J'avais vraiment du mal à insérer dans un tableau imbriqué, avec des résultats de rafraîchissement presque aléatoires, jusqu'à ce que je reste perplexe sur cette spécification:

Fondamentalement, le changement d'état d'une application peut être provoqué par trois choses:

  • Événements - cliquez sur, soumettez,…

  • XHR - Récupération de données d'un serveur distant

  • Timers - setTimeout (), setInterval ()

( https://blog.blingtram.io/angular/2016/02/22/angular-2-change-detection-explained.html#what-causes-change )

J'ai donc essayé setTimeout et, miraculeusement, cela a fonctionné ...

0
Jiro Matchonson