我正在开发具有OneSignal推送通知的Ionic 3 App,
当前,最新通知显示在列表底部,我在将其排序在列表顶部时遇到问题。
我在下面的通知屏幕中放置了我的代码:
请咨询。
app.components.ts
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
if (isCordovaAvailable()) {
this.oneSignal.startInit(oneSignalAppId, sender_id);
this.oneSignal.inFocusDisplaying(this.oneSignal.OSInFocusDisplayOption.InAppAlert);
this.oneSignal.handleNotificationReceived().subscribe(data => this.onPushReceived(data.payload));
this.oneSignal.handleNotificationOpened().subscribe(data => this.onPushOpened(data.notification.payload));
this.oneSignal.endInit();
}
});
}
private onPushReceived(payload: OSNotificationPayload) {
this.notification.save(
payload.title,
payload.body,
payload.notificationID,
payload.launchURL,
payload.bigPicture
).then(() => this.notification.showAlert(payload.title, payload.body));
}
private onPushOpened(payload: OSNotificationPayload) {
this.notification.save(
payload.title,
payload.body,
payload.notificationID,
payload.launchURL,
payload.bigPicture
).then(() => this.notification.showAlert(payload.title, payload.body));
}
notifications.ts
ngOnInit() {
this.getNotifications();
}
getNotifications() {
this.loading.showLoading();
Promise.all([
this.notification.all()
]).then(v => {
this.notificationList = v[0];
this.loading.dismissLoading();
});
}
delete(item, i) {
Promise.all([
this.notification.delete(i),
]).then(() => {
this.notificationList.splice(i, 1);
});
}
clearAll() {
Promise.all([
this.notification.clear()
]).then(() => {
this.notificationList = [];
});
}
notifications.html
<ion-content padding>
<ion-title>
Announcements
</ion-title>
<ion-list>
<ion-item-sliding *ngFor="let item of notificationList; let i = index">
<ion-item (click)="redirect(item?.launchURL)">
<img src="{{ item?.bigPicture }}" style="display:block;" />
<h2>{{ item?.title }}</h2>
<p>{{ item?.message }}</p>
<small>{{ item?.created_at }}</small>
</ion-item>
<ion-item-options>
<button ion-button color="light" (click)="delete(item, i)">Delete</button>
</ion-item-options>
</ion-item-sliding>
<button *ngIf="notificationList.length > 0" ion-button color="danger" (click)="clearAll()" full>Delete All</button>
</ion-list>
</ion-content>
答案 0 :(得分:1)
最快的方法可能是进行https://github.com/tahajahangir/jdate
getNotifications() {
this.loading.showLoading();
Promise.all([
this.notification.all()
]).then(v => {
this.notificationList = v[0];
this.notificationList = this.notificationList.reverse();
this.loading.dismissLoading();
});
}
一种更强大的方法是创建一个缓存服务来缓存您的旧通知,并创建一个使用Array.reverse()的通知服务。您可以订阅notificationsList中的更改,并在数据更改时发布更新。以下是我们在公司编写的通知服务的摘录,并做了一些较小的修改以适应您notificationsList[]
中Item
的结构:
// ./services/notificationsList.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
// import { LocalStorageService } from './localstorage.service'
import { Observable } from 'rxjs/Observable';
import _ from 'lodash';
export interface Item {
itemId: string;
created_at: number;
message: string;
title: string;
};
@Injectable()
export class NotificationList {
private notificationsSubject: BehaviorSubject<Item[]>;
public notificationList: Observable<Item[]>;
// you can create a LocalStorageService for your cache
private notificationsCache: LocalStorageService<Item[]> = new LocalStorageService<Notification[]>('notifications', []);
constructor() {
this.notificationsSubject = new BehaviorSubject<Item[]>(this.notificationsCache.get());
this.notifications = this.notificationsSubject.distinctUntilChanged(_.isEqual).publishReplay(1).refCount();
this.notifications.subscribe(notifications => this.notificationsCache.set(notifications));
}
// etc ...
}