Представление не обновляется, когда изменение модели вызывается с дочерней страницы (Ionic & Angular)

Question

Я использую Ionic 3.20 с Angular 5.2.9, и у меня возникла проблема с обновлением содержимого после изменения модели. Я новичок во всем этом - я, вероятно, упускаю что-то довольно простое.

На мой взгляд, у меня есть этот элемент:

    <ion-item-sliding #slidingElement *ngFor="let item of this.myService.myList?.firstLevel.secondLevel">

В службе myService У меня есть две функции:

    public myList: Array;

    getListOfData(): Observable {
        return  this.http.get(`service_endpoint_url`);
    }

    retrieveListOfData() {
        this.getListOfData().subscribe((result) => {
            this.myList = result;
            this.counter = this.myList['firstLevel'].length;
        });
    }

При первой загрузке (при ngOnInit) this.myService.retrieveListOfData() вызывается и представление успешно отображается. Когда я выполняю действие для определенного элемента в списке, список должен обновляться (этот конкретный элемент больше не должен присутствовать в списке). Я делаю это так:

    this.actionService.DoAction().subscribe((result) => {
        if(result == 'success') {
            this.myService.retrieveListOfData();
        }
    });

Работает, если этот код вызывается на той же странице (где находится список элементов).

Но если я сделаю это на странице сведений о конкретном элементе («дочерняя» страница, доступная по нажатию на элемент списка), я увижу в консоли, что переменная this.myList изменяется, но вид (список элементов) не отображается при отображении страницы со списком элементов. Код:

    this.actionService.DoAction().subscribe((result) => {
        if(result == 'success') {
            this.myService.retrieveListOfData();
            //goes from detail page of specific item back to page with list of items
            this.app.getRootNav().popToRoot();
        }
    });

Возможно, это как-то связано с Зоной? Как правильно обновить список элементов на странице сведений о конкретном элементе?

Заранее спасибо!

РЕДАКТИРОВАТЬ 2018-05-14: Я обнаружил, в чем проблема в моем приложении. Мы реализовали ленивую загрузку модулей. Из-за того, что эта служба не была разделена между компонентами как единое целое - вместо этого каждый компонент выполнял свою функцию. Я реализовал решение, представленное в этом блоге .

Я также узнал, что моя номенклатура в этом вопросе была немного неправильной - упомянутые компоненты не являются братьями и сестрами (не «Угловой путь»). Я оставляю правильный ответ Иисуса Навина.

Answer 1

Angular не обнаруживает изменения переменных во внедренном сервисе.

Есть два способа произвести то, что вы хотите.

Выходной излучатель : используйте выходной излучатель на своей странице сведений (дочерней), чтобы уведомить главную (родительскую) страницу об изменениях.

В child.component.ts:

@Output() listChanged = new EventEmitter<void>();

this.actionService.DoAction().subscribe((result) => {
    if(result == 'success') {
        this.myService.retrieveListOfData();
        this.listChanged.emit();
        //goes from detail page of specific item back to page with list of items
        this.app.getRootNav().popToRoot();
    }
});

В parent.component.ts добавьте это в дочерний компонент: (listChanged)="retrieveListOfData()"

Observables : настроить свой список в сервисе Subject и подписаться на него в своих компонентах, вместо того, чтобы хранить данные в переменной, вставить данные в использование Subject.next (data)