我有这个代码,该代码应该显示先前发送的通知。每次用户访问页面时,都应该出现更新的通知列表,他们还应该能够更新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();
}
}