Javascript 从子页面调用模型更改时视图不刷新（离子和角度）

我在Angular 5.2.9中使用的是Ionic 3.20，在更改模型后，我在内容刷新方面遇到了问题。我对这一切都不熟悉——我可能缺少一些基本的东西

在我看来，我有以下因素：

<ion-item-sliding #slidingElement *ngFor="let item of this.myService.myList?.firstLevel.secondLevel"> 在第一次加载时（在

ngOnInit

）

调用此.myService.retrieveListOfData（）

，并成功呈现视图。当我对列表中的特定项执行操作时，应该刷新列表（该特定项不应该再出现在列表中）。我是这样做的：

this.actionService.DoAction().subscribe((result) => { if(result == 'success') { this.myService.retrieveListOfData(); } }); 这可能与区域有关？如何从特定项目的详细信息页面正确刷新项目列表

提前谢谢

编辑2018-05-14:我发现了我的应用程序中的问题所在。我们实现了模块的延迟加载。因为服务并不是作为一个单独的组件在组件之间共享的，而是每个组件都运行它的服务。我实现了中介绍的解决方案

---

我还发现，我在这个问题上的命名有点离题——组件不是兄弟（不是以“角度”的方式）。我认为Joshua的回答是正确的。

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

@Output（）listChanged=neweventemitter（）；
this.actionService.DoAction（）.subscribe（（结果）=>{
如果（结果=‘成功’）{
this.myService.retrieveListOfData（）；
this.listChanged.emit（）；
//从特定项目的详细信息页面返回到包含项目列表的页面
this.app.getRootNav（）.poptRoot（）；
}
});

在parent.component.ts中，将其添加到子组件：

（listChanged）=“retrieveListOfData（）”

---

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

嗨，Joshua！我还没有时间实施你的建议，但我相信你为我指明了正确的方向。我很乐意给你+1，但遗憾的是我没有足够的声望点数（感谢您的时间！很高兴我提供了帮助，请检查答案是否正确，或者在您尝试生成所需内容时自己为问题编写答案。我检查您的答案是否正确。当我尝试实现它时，我将在此处发布我的结果。我发现了问题所在（我编辑了我的问题）。 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(); } });

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