Ion Refresher 不从 API 更新页面内容

Question

我有这段代码应该显示以前发送的通知。每次用户访问该页面时应该会出现更新的通知列表，他们还应该能够更新 dorefresh（下拉）上的内容。

    import { Component } from '@angular/core';
    import { ToastController, Refresher } from 'ionic-angular';
    import { OneSignalData } from '../../providers/onesignal-data';
    import { NavController, NavParams } from 'ionic-angular';

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

      notifications: any = [];

      constructor(
        public navCtrl: NavController, 
        public navParams: NavParams,
        public onesignalData: OneSignalData,
        public toastCtrl: ToastController,
      ) {}

      ionViewDidLoad() {
        console.log('ionViewDidLoad NotificationsPage');
        this.updateNotifications();
      }

      updateNotifications(){
        this.onesignalData.getNotifications().subscribe((notifications) => {
          this.notifications = notifications;
          console.log(notifications)
        });    
      }

      doRefresh(refresher: Refresher) {
        this.onesignalData.getNotifications().subscribe((notifications) => {
          this.notifications = notifications;
          console.log(notifications)    
          setTimeout(() => {
            //this.updateNotifications();
            refresher.complete();

            const toast = this.toastCtrl.create({
              message: 'Push Notifications have been updated.',
              duration: 3000
            });
            toast.present();
          }, 1000);
        });  
      }  
    }

它应该从另一个看起来像这样的文件中获取数据：

            import { Injectable } from '@angular/core';
            import { HttpClient } from '@angular/common/http';
            import { Observable } from 'rxjs/Observable';
            import 'rxjs/add/operator/map';
            import 'rxjs/add/observable/of';

            @Injectable()
            export class OneSignalData {
                data: any;

                constructor(
                    private http: HttpClient
                ) {}

                load(): any {
                    if (this.data) {
                        return Observable.of(this.data);
                    } else {
                        return this.http.get('https://onesignal.com/api/v1/notifications?app_id=XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX&limit=50',
                        { headers: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' }},
                            );
                    }
                }    

                getNotifications() {
                    return this.load().map((data: any) => {
                        return data.notifications;
                    });
                }

            }

如您所见，我在刷新功能中再次运行服务（如下），但是新数据没有更新……除非我完全刷新网页以加载新数据

this.onesignalData.getNotifications().subscribe((notifications) => {
this.notifications = notifications;

最初我认为 Observable 在请求新数据之前提供旧数据是一个问题，但是当我从等式中删除 Observable 时，我仍然遇到同样的问题。你能看到我错过了什么吗？

Answer 1

我仍然无法弄清楚为什么数据会存储在磁盘缓存中，但我能够通过创建一个随机字符串并将其附加到 GET 请求 URL 来绕过它：

load(): any {
    let timeStamp = +new Date();
    return this.http.get('https://onesignal.com/api/v1/notifications?app_id=XXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX&limit=50?tsp=' + timeStamp,
    { headers: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX' }},
        );
} 

Answer 2

1))您可以使用将您的刷新函数放入 ngOnChanges() 中，这样每当您的数据发生更改时，就会调用 ngOnChanges。

2)) 你可以做一件事，使用**双向绑定[(ngModel)]**绑定你的HTML，这样每当你的数据发生变化时，它就会在视图中自动更新。就像 ex --> 每当 this.notification 数据发生变化时，它就会反映在您的视图中。

我个人更喜欢第一种方法，因为它更有说服力，也更容易。

ngOnChanges() 的例子 --> 根据我在项目中使用的内容

ngOnChanges(changes: any) {
        if (changes.dataSourceId != null && changes.dataSourceId.currentValue != null) {
            if (changes.pageId != null && changes.pageId.currentValue != null) {
                this.GetDataSource();
            }
           }