如何使用 *ngFor 指令反向迭代？

Question

在 angular 中，我正在尝试查询 Firebase，我希望当对象返回时，内容被反向迭代。

在 TS 我得到了这个

 this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges();

我尝试在那里使用 reverse()，但是，我收到一条错误消息：“Reverse does not exist on type Observerable”

在 HTML 我有这个

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

我怎样才能完成这个？

Answer 1

您可以使用 RxJS 运算符 map 和管道来转换最终发出的值：

this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges().pipe(map(values => values.reverse());

Answer 2

valueChanges() returns 是一个包装底层数据数组的 Observable。为了反转底层数据数组，您可以通过 map RxJS 运算符和 return 反转数组来管道 Observable。

this.items = db.list('/items', ref => ref.limitToLast(10)).valueChanges()
                     .pipe(
                     map(values => values.reverse())
                     );

如何使用 *ngFor 指令反向迭代？

How do I iterate in reverse with *ngFor directive?

angular

firebase

firebase-realtime-database

angularfire

ngfor