Ionic2存储模块/正在更新列表

Question

新来离子和棱角，我真的很喜欢它（我终于看到了Java中的JavaScript！），但我有一个检测数据发生变化后的问题。 我有一个使用离子存储模块保存/检索模拟数据的服务，但是当我使用该服务在我的页面构造函数中检索数据时，我的HTML不会更改。

import { Component, Injectable } from '@angular/core'; 
    import { Storage } from '@ionic/storage'; 
    import {Observable} from 'rxjs/Observable'; 

    @Injectable() 
    export class IconService{ 

     private allNotifications:Notification[] = []; 

     constructor(private storage:Storage) { 
      storage.ready().then(() => {}); 
     } 

    public getAllNotifications(){ 
     this.storage.get('allNotifications').then((data)=>{ 
       this.allNotifications = JSON.parse(data); 
     }); 
     return Observable.create(observer => { 
      observer.next(this.allNotifications); 
      observer.complete(); 
     }); 
    }  
    } 

当我订阅我的页面可观察到的，我的列表将不会更新，直到我有一个按钮交互。我希望列表在页面打开后立即更新。

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
}) 
export class HomePage { 
constructor(public navCtrl: NavController, public navParams:NavParams, public modalCtrl:ModalController, 
    private iconService:IconService,private storage:Storage) { 
    this.iconService.getAllNotifications().subscribe(data =>this.notifications = data); 
    } 

    ionViewWillEnter(){ 
    this.iconService.getAllNotifications().subscribe(data =>this.notifications = data); 
    } 
    } 

然而，当我打电话storage.get()从我的页面

constructor(public navCtrl: NavController, public navParams:NavParams, public modalCtrl:ModalController, 
    private iconService:IconService,private storage:Storage) { 
    this.storage.get('allNotifications').then((data)=>{ 
       this.notifications = JSON.parse(data); 
     }); 
    } 

的数据加载和HTML是只要打开页面更新。这是如果需要的HTML：

<div *ngIf='notifications'> 
    <button ion-fab *ngFor='let notification of notifications' [color]="day ? 'light' : 'moon'"><ion-icon name='{{notification.icon}}'></ion-icon></button> 
</div> 

我宁愿用我的服务，然后直接与存储虽然互动，所以我究竟做错了什么？我也尝试不返回一个observable，只是简单地返回解析的JSON数据，但这也不起作用。

离子/角大师，请帮忙！

Answer 1

当我订阅我的页面中的observable时，我的列表不会更新 ，直到我与按钮交互为止。我希望在页面打开时尽快更新列表 。

这似乎是一个与Angular相关的问题，不知道你在服务中做什么，所以它不知道它应该更新视图。这也可以解释为什么在与按钮交互时更新视图。

这是因为一些非常有趣和强大的东西叫做区域。如果这个概念对你来说是新的，请参阅here和here以获得惊人的解释。正如你可以看到那里，

应用程序状态的变化是由三个因素引起：

1）活动 - 用户的事件，如点击，改变，输入，提交，...

2）XMLHttpRequest的 - 例如，从远程服务 计时器获取数据时 -

3）的setTimeout（），setInterval的（），因为JavaScript的

... 事实证明，这是唯一的情况下，当角实际上是 兴趣更新查看。

所以你需要让Angular知道某些东西已经改变，需要我们意识到更新的东西。我们可以通过改变这样的代码尝试：

import { ..., NgZone } from '@angular/core'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
}) 
export class HomePage { 

    constructor(public navCtrl: NavController, 
       public navParams: NavParams, 
       public modalCtrl: ModalController, 
       private iconService: IconService, 
       private storage: Storage, 
       private ngZone: NgZone) { 

     // Subscribe only here, no need for doing it also in ionViewWillEnter 
     this.iconService.getAllNotifications().subscribe(
      data => { 
       this.ngZone.run(() => { 
        // Now Angular knows that something has changed, 
        // and the view needs to be checked/updated 
        this.notifications = data 
       });    
      }); 
    } 

} 

你也可以简化您的服务代码，使用Observable.fromPromise操作：

import { Component, Injectable } from '@angular/core'; 
import { Storage } from '@ionic/storage'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class IconService { 

    private allNotifications: Notification[] = []; 

    constructor(private storage:Storage) { } 

    public getAllNotifications(): Observable<any> { 

     return Observable.fromPromise(
      this.storage.get('allNotifications').then(data => { 

       // Update the data 
       this.allNotifications = JSON.parse(data); 

       // Return the data to the caller 
       return this.allNotifications; 
      }) 
     ); 
    }  
}