如何使用*ngFor指令实现反向迭代，处理Firebase返回的Observable类型数据

问题原因 #

你调用reverse()报错的原因是：valueChanges()返回的是Observable异步流对象，而非实际的数组结果，reverse()是JS数组的原生方法，不能直接在Observable类型上调用。

解决方案 #

方案1：TS层通过RxJS操作符处理（更推荐） #

在Observable流中通过map操作符处理返回的数组，完成反转后再传给模板，性能更稳定，适合所有场景：

1. 先导入RxJS的map操作符：

import { map } from 'rxjs/operators';

2. 修改你的查询代码：

// 这里用扩展运算符复制数组后再反转，避免reverse原地修改数组产生的副作用
this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges().pipe(
  map(arr => [...arr].reverse())
);

3. 模板无需修改，保持原有写法即可：

*ngFor="let item of items | async | slice:0:100"

方案2：模板层直接处理（写法更简单） #

在async管道拿到实际数组之后调用反转方法，加安全导航操作符避免空值报错，适合简单小数据量场景：

*ngFor="let item of (items | async)?.reverse() | slice:0:100"

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