web-dev-qa-db-ja.com

Angular 2 ngOnInit promiseの配列プッシュ後にビューを更新しません

angular 2、を使用してNativeScriptアプリを作成しました。アプリケーションのフロントエンドに表示されると予想されるオブジェクトの配列があります。オブジェクトを配列内に直接プッシュすると、動作はngOnInit（）は機能しますが、ngOnInit（）でpromiseを作成すると機能しません。コードは次のとおりです。

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

相対htmlは次のとおりです。

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

アプリの起動時に1つのプッシュしか表示されませんが、「console.log（JSON.stringify（this.stories））;」をトリガーするボタンを作成しました。その瞬間、ボタンをタップすると、UIは変更された配列を検出しているように見え、他のプッシュされたオブジェクトが表示されます。

編集：

私はこのスレッドでより単純な例を作成しました： Angular 2：promiseで変数を変更すると、ngOnInitでビューが更新されません

angularnativescriptes6-promiseangular2-nativescript
13
Andrea Veronesi

変更の検出は参照に基づいており、要素を配列にプッシュしてもトリガーされません。このようにリファレンスを更新してみてください：

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

私はこの仕様に行き詰まるまで、入れ子になった配列へのプッシュでほとんどランダムな更新結果で実際に問題がありました：

基本的に、アプリケーションの状態変化は次の3つの原因で発生します。

  • イベント-クリック、送信、…

  • XHR-リモートサーバーからのデータの取得

  • タイマー-setTimeout（）、setInterval（）

（ https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html#what-c​​auses-change ）

だから私はsetTimeoutを試してみましたが、奇跡的にうまくいきました...

0
Jiro Matchonson