离子刷新未更新API的页面内容



我有这个代码,该代码应该显示先前发送的通知。每次用户访问页面时,都应该出现更新的通知列表,他们还应该能够更新DoreFresh(plldldown(上的内容。

    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;

最初,我认为在请求新数据之前可观察到的旧数据是一个问题,但是当我从方程式中删除可观察的数据时,我仍然遇到相同的问题。你能看到我缺少什么吗?

我仍然无法弄清楚为什么将数据存储在磁盘缓存中,但是我能够通过创建随机字符串并使用get request request 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' }},
        );
} 

1((您可以在ngonchanges((中使用刷新功能,因此,每当您的数据当时更改时 ngonchanges >将被称为。

2((您可以使用**双向绑定[(ngmodel(] **进行绑定HTML的一件事,因此,每当更改数据时,它都会在视图中自动更新。就像ex->时,每当更改注释数据时,它将在您的视图中反映。

我个人更喜欢第一种方法,因为它更具说服力和容易。

ngonchanges(( ->根据我在项目中使用的

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

相关内容

  • 没有找到相关文章

最新更新