从子页面调用模型更改时视图未刷新（Ionic

Question

我在Angular 5.2.9中使用Ionic 3.20，并且在模型更改后内容刷新时遇到问题。我对这一切都不熟悉——我可能错过了一些非常基本的东西。

在我看来，我有这个元素：

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

在服务中，我有两个功能：

    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上）。我的服务。调用retrieveListOfData（），并成功呈现视图。当我对列表中的特定项执行操作时，应该刷新列表（该特定项不应该再出现在列表中）。我是这样做的：

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

如果在同一个页面（项目列表所在的页面）中调用此代码，则它可以工作。

但如果我在特定项目的详细信息页面（“子”页面，在列表项目单击时访问），我可以在控制台中看到该变量。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不会检测注入服务中变量的更改。

有两种方法可以生产你想要的东西。

输出发射器：在详细信息（子）页面中使用输出发射器来通知主（父）页面的更改。

在儿童中。组成部分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）="检索ListOfData（）"

可观察对象：在服务主题中配置您的列表并在组件中订阅它，而不是将数据存储在变量中，而是将数据推送到使用Subject.next（data）