从子页面调用模型更改时视图不刷新（离子和角度）-Java 学习之路

我正在使用带有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();
        }
    });

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

但是，如果我在特定项目的详细页面（"child"页面，在列表项目上单击访问）中执行此操作，我可以在控制台中看到，正在更改变量 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有关吗？如何从特定项目的详细信息页面正确刷新项目列表？

提前致谢！

EDIT 2018-05-14: 我发现我的应用程序中存在的问题是什么 . 我们实现了延迟加载模块 . 因为该服务不是作为单例在组件之间共享 - 而是每个组件运行它的服务的意义 . 我实现了this blog post中提供的解决方案 .

我也发现我在这个问题中的命名有点偏离 - 提到的组件不是兄弟姐妹（不是“Angular方式”） . 我正在离开约书亚的答案 .

1 回答

0
Angular不会检测注入服务中变量的变化 .

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

Output Emitter ：在详细信息（子）页面中使用输出 Launcher 来通知主（父）页面更改 .

在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（数据）
回复于 2024-05-21T14:56:17+08:00

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

1 回答

相关问题