Question

我正在开发具有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>

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

}

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

1 个答案: