Angular 5：如何对Observable中的数据按字母顺序（时间先后）排序？

嘿，我来帮你搞定这个排序难题！你现在遇到的问题是数据默认按Firestore文档ID排序，但你想按事件的开始时间（比如07:20 → 10:50 → 13:05）来排，对吧？这里有两种靠谱的解决思路，你可以根据自己的场景选：

方法一：在Firestore查询时直接排序（推荐） #

这种方式更高效，因为排序在数据库端完成，减少客户端的计算压力。你需要先确保数据里有能用来排序的时间字段，有两种常见做法：

1. 存储合并的时间字符串（HH:mm格式） #

如果你的文档里还没有这个字段，可以新增一个startTime字段，把startHour和startMinute拼成类似"07:20"的字符串（注意小时和分钟要补零，比如7点要写成"07"，不然"7:20"和"10:50"排序会出问题）。

然后查询的时候直接用orderBy：

// Angular Firestore示例
this.events$ = this.firestore
  .collection('your-collection-name', ref => ref.orderBy('startTime'))
  .valueChanges();

因为HH:mm格式的字符串按字典序排序刚好和时间先后一致，所以这样就能直接得到正确的顺序。

2. 存储总分钟数（数字格式） #

另一种更精准的方式是把时间转成总分钟数，比如07:20就是7*60 + 20 = 440，10:50是10*60+50=650。新增一个startTotalMinutes字段存储这个数字，查询时排序：

this.events$ = this.firestore
  .collection('your-collection-name', ref => ref.orderBy('startTotalMinutes'))
  .valueChanges();

数字排序完全不会有字符串的格式问题，适合对精度要求高的场景。

注意：如果你的查询还带where条件，Firestore可能要求你创建复合索引，不过单纯的orderBy单个字段会自动创建索引，不用手动操作。

方法二：客户端拿到数据后排序 #

如果暂时不想修改Firestore的字段结构，也可以在Observable里用RxJS的操作符对数据排序：

假设你的每个事件对象有startHour（数字类型，比如7）和startMinute（数字类型，比如20），可以这样处理：

import { map } from 'rxjs/operators';

// 原本的查询代码
this.events$ = this.firestore.collection('your-collection-name').valueChanges().pipe(
  map(events => {
    // 对数组按时间排序
    return events.sort((eventA, eventB) => {
      // 先比小时，小时相同再比分钟
      if (eventA.startHour !== eventB.startHour) {
        return eventA.startHour - eventB.startHour;
      } else {
        return eventA.startMinute - eventB.startMinute;
      }
    });
  })
);

这样每次数据更新时，都会自动重新排序，保证显示的是时间顺序。

如果你的时间已经是HH:mm格式的字符串，排序更简单：

this.events$ = this.firestore.collection('your-collection-name').valueChanges().pipe(
  map(events => events.sort((a, b) => a.startTime.localeCompare(b.startTime)))
);

这样调整后，你的事件标题栏应该就能按时间先后正确排序啦！如果你的代码有特殊场景（比如用的是其他框架、时间字段格式不同），可以再补充细节哦～

内容的提问来源于stack exchange，提问作者Wesley Orth