Javascript 如何在顶部对最新通知进行排序？

我正在开发一款带有OneSignal推送通知的Ionic 3应用程序

目前，最新的通知显示在列表的底部，我在列表顶部排序时遇到问题

我已将通知屏幕的代码放在下面：

请给我一些建议

应用程序组件.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));
  }

  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 = [];
    });
  }

通知。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));
  }

  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>

公告
{{item？.title}}
{{item？.message}

{{item？.created_at}}
删除
全部删除

最快的方法可能是

一个更强大的方法是创建一个缓存服务来缓存旧的通知，并使用创建一个通知服务。您可以订阅通知列表中的更改，并在数据更改时发布更新。下面是我们在我的公司编写的通知服务的摘录，其中有一些小的编辑，以适应

项目的
通知列表[]
的结构：

// ./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 ...

}


/./services/notificationsList.service.ts
从“@angular/core”导入{Injectable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
//从“./localstorage.service”导入{LocalStorageService}
从“rxjs/Observable”导入{Observable}；
从“lodash”进口；
导出接口项{
itemId：字符串；
创建位置：编号；
消息：字符串；
标题：字符串；
};
@可注射（）
导出类通知列表{
私人通知主体：行为主体；
公共通知列表：可见；
//您可以为缓存创建LocalStorageService
private notificationsCache:LocalStorageService=newlocalstorageservice（'notifications'，[]）；
构造函数（）{
this.notificationsSubject=新行为主体（this.notificationsCache.get（））；
this.notifications=this.notificationsObject.distinctunitrichanged（u.isEqual）.publishReplay（1.refCount（）；
订阅（通知=>this.notificationsCache.set（通知））；
}
//等等。。。
}