按日期排序异步对象

Question

我有 Angular 5 + Firebase 应用程序，我从 Firebase 列表中获取项目并使用 *ngFor 将它们设置到视图中。

  <a routerLink="post/{{post.url}}" *ngFor="let post of (posts | async)">
     <h2>{{ post?.title }}</h2>
     <span>{{ post?.date }}</span>
  </a>

我的每个项目都有一个 "Date" 字段，格式为 "dd.mm.yyyy"。如何将它们设置为按日期排序的组件视图（从最新到旧）？

如何从 Firebase 获取帖子：

  getPosts(): Observable<any[]> {
    return this.db.list('posts').snapshotChanges().map(changes => {
      return changes.map(c => ({
        key: c.payload.key,
        ...c.payload.val() }));
    });
  }

Answer 1

您的日期为 "dd.mm.yyyy"，这是一种天生难以排序的日期格式。使用这种格式，您必须在客户端上执行 sorting/filtering。

如果您以 ISO-8859 格式存储日期（例如 yyyy-mm-dd），您可以让 Firebase 处理 sorting/filtering：

this.db.list('posts', ref => ref.orderByChild('date'))

另见 AngularFire2 documentation on queries。

请注意，这只会按升序顺序对项目进行排序，因此从最旧到最新。如果你想让它们下降，你要么必须在客户端中反转，要么存储一个反转的值。在后一种情况下，我建议存储倒置时间戳而不是字符串，例如

"negativeTimestamp": -1523753371440

有关这方面的更多信息，请参阅我对

的回答中的链接

按日期排序异步对象

Order async objects by date

angular

firebase

firebase-realtime-database

angularfire2

angular-pipe