Angular 5可排序表格实现及Firebase预订记录过滤（排除昨日前数据）

开发者阿泽

2026-5-25

我来帮你一步步实现这两个需求——过滤掉昨天之前的预订，同时给表格加上排序功能，适配你的Angular 5和Firebase场景：

1. 先过滤掉日期早于昨天的预订记录

首先我们需要在Observable数据流里加入过滤逻辑，先处理日期边界，再筛选符合条件的记录：

步骤1：导入必要的RxJS操作符

在组件文件顶部导入需要的工具：

import { map, combineLatest } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';

步骤2：计算日期边界并过滤数据

我们先定义昨天的起始时间（凌晨0点），然后对Firebase返回的Observable数据进行过滤：

// 计算昨天凌晨0点的时间戳作为过滤边界
const yesterdayStart = new Date();
yesterdayStart.setDate(yesterdayStart.getDate() - 1);
yesterdayStart.setHours(0, 0, 0, 0);

// 用BehaviorSubject管理排序参数（后面排序会用到）
private sortKey$ = new BehaviorSubject<string>('email');
private sortDirection$ = new BehaviorSubject<'asc' | 'desc'>('asc');

// 组合数据流：同时监听预订数据、排序字段、排序方向
this.filteredReservations = combineLatest([
  this.db.list('/reservations').valueChanges(),
  this.sortKey$,
  this.sortDirection$
]).pipe(
  map(([reservations, sortKey, sortDirection]) => {
    // 第一步：过滤掉早于昨天的记录
    const filtered = reservations.filter(reservation => {
      // 处理Firebase日期格式：如果是Timestamp类型，先转成Date
      const reservationDate = reservation.from instanceof Date 
        ? reservation.from 
        : reservation.from.toDate(); // 适配Firebase Timestamp
      return reservationDate >= yesterdayStart;
    });

    // 第二步：排序（后面会详细说）
    // ...
  })
);

2. 实现表格排序功能

我们基于上面的组合数据流，加入排序逻辑，同时给表头添加点击切换排序的交互：

步骤1：完善排序逻辑

在刚才的map操作里补充排序代码，区分字符串和日期字段的排序规则：

// 接上面的map逻辑
return filtered.sort((a, b) => {
  if (sortKey === 'from') {
    // 日期字段排序：比较时间戳
    const dateA = new Date(a[sortKey]);
    const dateB = new Date(b[sortKey]);
    return sortDirection === 'asc' 
      ? dateA.getTime() - dateB.getTime() 
      : dateB.getTime() - dateA.getTime();
  } else {
    // 字符串字段排序：不区分大小写
    const valueA = a[sortKey].toLowerCase();
    const valueB = b[sortKey].toLowerCase();
    return sortDirection === 'asc' 
      ? valueA.localeCompare(valueB) 
      : valueB.localeCompare(valueA);
  }
});

步骤2：添加排序切换方法

在组件类里写一个方法，用来切换排序字段和方向：

onSort(key: string) {
  if (this.sortKey$.value === key) {
    // 点击同个字段，切换排序方向
    this.sortDirection$.next(
      this.sortDirection$.value === 'asc' ? 'desc' : 'asc'
    );
  } else {
    // 点击新字段，默认升序
    this.sortKey$.next(key);
    this.sortDirection$.next('asc');
  }
}

步骤3：修改模板，添加排序交互

把你的表格表头改成可点击的，同时显示当前排序方向：

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col" (click)="onSort('email')">
        Email 
        <span *ngIf="sortKey$.value === 'email'">
          {{ sortDirection$.value === 'asc' ? '↑' : '↓' }}
        </span>
      </th>
      <th scope="col" (click)="onSort('name')">
        Name 
        <span *ngIf="sortKey$.value === 'name'">
          {{ sortDirection$.value === 'asc' ? '↑' : '↓' }}
        </span>
      </th>
      <th scope="col" (click)="onSort('from')">
        From 
        <span *ngIf="sortKey$.value === 'from'">
          {{ sortDirection$.value === 'asc' ? '↑' : '↓' }}
        </span>
      </th>
      <!-- 其他表头字段同理 -->
    </tr>
  </thead>
  <tbody>
    <!-- 用async管道订阅处理后的Observable -->
    <tr *ngFor="let res of filteredReservations | async">
      <td>{{ res.email }}</td>
      <td>{{ res.name }}</td>
      <td>{{ res.from | date:'yyyy-MM-dd HH:mm' }}</td>
      <!-- 其他列数据 -->
    </tr>
  </tbody>
</table>

关键注意点

如果你的Firebase日期存储的是字符串（比如"2024-05-20"），把reservation.from.toDate()改成new Date(reservation.from)即可
async管道会自动帮你管理Observable的订阅和取消订阅，不用手动调用subscribe和unsubscribe
排序逻辑可以根据你的字段类型灵活调整，比如数字字段直接比较数值

内容的提问来源于stack exchange，提问作者Burst of Ice