Question

我正在使用带有Angular 5.2.9的Ionic 3.20，我在更改模型后出现内容刷新问题。我是所有这一切的新手 - 我可能遗漏了一些非常基本的东西。

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


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

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

但是，如果我在特定项目的详细页面（＆＃34;子＆＃34;页面，在列表项目点击上访问）中进行，我可以在控制台中看到变量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();
        }
    });

它可能与Zone有关？如何从特定项目的详细信息页面正确刷新项目列表？

提前致谢！

编辑2018-05-14：我发现我的应用中出现了什么问题。我们实现了延迟加载模块。因为该服务不是作为一个单独的组件共享 - 而是每个组件运行它的服务的意义。我实现了this blog post中提供的解决方案。

我还发现我在这个问题中的命名有点偏离 - 提到的组件不是兄弟姐妹（不是＆＃34; Angular方式＆＃34;）。我正在离开约书亚的答案。

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.next（数据）< / p>

从子页面调用模型更改时视图不刷新（Ionic＆amp; Angular）

1 个答案: