Подтвердить что ты не робот

Angular 2 не обновлять представление после нажатия массива в ngOnInit prom

Я создал приложение NativeScript с angular 2, у меня есть массив объектов, которые я ожидаю увидеть во внешнем интерфейсе приложения. поведение заключается в том, что если я нажимаю объект в массив непосредственно внутри ngOnInit(), он работает, но если я создаю обещание в ngOnInit(), это не сработает. вот код:

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>

когда приложение запускается, я вижу только одно нажатие, но я создал кнопку, которая запускает "console.log(JSON.stringify(this.stories)); и в этот момент, когда я нажимаю кнопку, ui, кажется, обнаруживает измененный массив, и появляется другой толкаемый объект.

EDIT:

Я создал более простой пример в этом потоке: Angular 2: когда я изменяю переменную в обещании. в ngOnInit вид не обновляется

4b9b3361

Ответ 1

Обнаружение изменений основано на ссылках, и нажатие элемента в массив не вызывает его. Попробуйте обновить ссылку следующим образом:

this.stories.push(story);
this.stories = this.stories.slice();

Ответ 2

        setTimeout(function () {
            this.stories.push(story);
        }, 0);

У меня действительно были проблемы с загрузкой во вложенный массив с почти случайными результатами обновления, пока я не озадачился этой спецификацией:

В основном изменение состояния приложения может быть вызвано тремя причинами:

  • События - нажмите, отправьте,…

  • XHR - выборка данных с удаленного сервера

  • Таймеры - setTimeout(), setInterval()

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

Так что я попробовал setTimeout, и чудесным образом это сработало...