Angular Пользовательский интерфейс не обновляется ngFor после асин c вызова

Question

Я использую модальные Ioni c для отправки данных обратно на мой компонент. Данные отправляются обратно правильно, но я не могу обновить интерфейс пользователя на всю жизнь. Результат одинаков при использовании setTimeout, NgZone.run, ChangeDetectorRef.markForCheck и ChangeDetectorRef.detectChanges

Вот мой код:

import { Component, OnInit, NgZone, ChangeDetectorRef } from "@angular/core";
import { Router } from "@angular/router";

import { ModalController } from "@ionic/angular";

import { LinkAccountModalComponent } from "......";

@Component({
    selector: "app-welcome-link-accounts",
    templateUrl: "./link-accounts.page.html",
    styleUrls: ["./link-accounts.page.scss"],
})
export class LinkAccountsPage implements OnInit {
    accounts = [];

    constructor(
        private router: Router,
        private zone: NgZone,
        private changes: ChangeDetectorRef,
        private modalController: ModalController
    ) { }

    ngOnInit() { }

    // Link a new account
    async linkAccount() {
        const modal = await this.modalController.create({
            component: LinkAccountModalComponent
        });

        await modal.present();

        const { data } = await modal.onWillDismiss();

            console.log(data);

            if (data) {
                this.zone.run(() => {
                    this.accounts.push(data); // Doens't work
                    this.accounts = this.accounts.concat(data); // Doesn't work

                    this.changes.markForCheck();
                    this.changes.detectChanges();
                });
            }

            console.log(this.accounts); // Correct
    }

    // Go to next page
    next() {
        this.router.navigate(["/welcome"]);
    }
}

Это часть шаблона, которая не обновляется :

<div *ngFor="let account of accounts">
    {{account.username}}
</div>

Я опубликовал пример со всем, что я пробовал все вместе, но я также попробовал их по отдельности. Из того, что я прочитал, любой из них должен работать. Что я делаю не так?

Спасибо

Answer 1

Сделайте это вместо этого.

modal.onDidDismiss().then(async x => { DO YOUR CODE HERE })

Вы делаете const DATA = ..... свою переменную X вы будете значением, которое вы передадите после отклонения модального режима. Я всегда так делаю. Я думаю, что легче читать и работать. Надеюсь, это поможет вам.