Ionic - 通知页面变量已更改的最佳方法是什么

时间:2017-11-27 08:03:34

标签: angular typescript ionic2 ionic3

假设我们有一个显示项目列表的页面ListItemPage

  • 在ts文件中,我们有一个变量items: any = [];

  • 在html文件中,我们有<ion-item *ngFor="let item of items">

用户可以点击(+)按钮推送另一个页面AddItemPage,他将在该页面上创建一个新项目。单击“保存”时,新项目将保存在数据库中(通过服务),并弹出页面。

通知ListItemPage应更新其items变量的最佳/通常方法是什么?

1 个答案:

答案 0 :(得分:1)

这是一个艰难的。这似乎是一个&#34;它取决于&#34;有点问题所以如果没有详细描述你的需求我恐怕不可能回答什么是最好的。

所以这是另一种方式来更新items

使用数据提取逻辑(more about navigating-lifecycle-events)实现ionViewWillEnter()方法。

每次要显示页面时,此方法都会触发,例如当它即将变得活跃时。所以通过实现这样的东西:

ionViewWillEnter() {
    this.dataService.getItems()
        .then(result => {
            this.items = result;
        })
        .catch(err => {
            console.log(err);
        });
    });
}

在您的dataService

let _items = [];

public getItems() {
    return new Promise ((resolve, reject) => { 
        if(!this._items || this._items.lenght == 0) {
            // this._items = Read items from DB / web service ...
        }

        resolve(this._items);
    });
}

public addItem(item: any) {
    this._items.push(item);
    // update db..
}

每次显示页面时都会有新数据。

通过调用addItem方法更新数据时,请确保对getItems方法的所有后续调用都会获得新数据。您还可以说数据已缓存,因此没有不必要的数据库查询。