时间戳

首页 > 解决方案 > 从子页面调用模型更改时视图不刷新（Ionic 和 Angular）

javascript - 从子页面调用模型更改时视图不刷新（Ionic 和 Angular）

问题描述

我将 Ionic 3.20 与 Angular 5.2.9 一起使用，并且在更改模型后内容刷新出现问题。我对这一切都很陌生-我可能缺少一些非常基本的东西。

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

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

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

    公共我的列表：数组；

    getListOfData(): 可观察的 {
        返回 this.http.get(`service_endpoint_url`);
    }

    检索ListOfData() {
        this.getListOfData().subscribe((结果) => {
            this.myList = 结果；
            this.counter = this.myList['firstLevel'].length;
        });
    }

在第一次加载 (on ngOnInit)时this.myService.retrieveListOfData()调用并成功呈现视图。当我对列表中的特定项目进行操作时，应刷新列表（此特定项目不应再出现在列表中）。我这样做是这样的：

    this.actionService.DoAction().subscribe((结果) => {
        如果（结果 == '成功'）{
            this.myService.retrieveListOfData();
        }
    });

如果在同一页面（项目列表所在的位置）中调用此代码，它会起作用。

但是，如果我在特定项目的详细信息页面（“子”页面，在单击列表项时访问）中执行此操作，我可以在控制台中看到，该变量this.myList正在更改，但是当带有列表的页面时视图（项目列表）不会重新呈现显示的项目。代码：

    this.actionService.DoAction().subscribe((结果) => {
        如果（结果 == '成功'）{
            this.myService.retrieveListOfData();
            //从特定项目的详细信息页面返回到项目列表页面
            this.app.getRootNav().popToRoot();
        }
    });

大概跟Zone有关吧？如何从特定项目的详细信息页面正确刷新项目列表？

提前致谢！

编辑 2018-05-14：我发现我的应用程序中的问题是什么。我们实现了模块的延迟加载。由于该服务没有在组件之间作为单例共享 - 而不是每个组件都运行它，它不是服务。我实现了这篇博文中提出的解决方案。

我还发现我在这个问题中的命名有点偏离 - 提到的组件不是兄弟姐妹（不是“Angular way”）。我将 Joshua 的回答保留为正确。

标签： javascriptangulartypescriptionic-framework

解决方案

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 并在您的组件中订阅它，而不是将数据存储在变量中，将数据推送到 using Subject.next(data)

推荐阅读