firebase - 在angularfire2 angular 6中反转一个可观察的数组
问题描述
我正在使用 Observable 数组来获取实时数据。数据按升序排列,但我需要它以相反的顺序显示。互联网上的示例在 angular 5 之前,语法不再有效。请指教
html
<tr *ngFor="let card of cards | async;let last = last ">
<td> <img [src]="card.frontImageUrl" width=200 height="100"></td>
</td>
refreshCards(){
this.cards = this.dataSvc.fetchCards().pipe(
map((cards: any) => cards.map(cardObj => new Card(cardObj.key, cardObj._frontImageUrl, cardObj._backImageUrl, cardObj._status, cardObj._date, cardObj._userId, cardObj._message)))
);
}
打电话给firedb
fetchCards(){
this.cardList = this.db.list<Card>('adminCardQueue', ref => ref.orderByChild('_date').limitToLast(50))
return this.cardList.snapshotChanges().pipe(
map(changes =>
changes.map(c => ({ key: c.payload.key, ...c.payload.val()}))
)
) ;
}
解决方案
您可以使用 .slice().reverse() 在 *ngFor 反转数组
<tr *ngFor="let card of (cards | async)?.slice().reverse();let last = last ">
.slice ()创建数组的副本,而.reverse()对数组执行相反的操作。
推荐阅读
- c# - vector
areas(contour.size()) in c#? mass of center, area. Particle Analyze - python - 如何在另一个类中访问在一个类中声明的全局变量?
- vue.js - Vuejs:更新子组件的地图道具值
- linux - 为什么创建 Docker 网络会随机中断来自我的 Jenkins 服务器的所有连接?
- javascript - ReactJS setState 到空白对象不起作用
- javascript - 当某个函数运行时移除一个 EventListener
- python - 如何在 python 中使用 MLE 拟合双指数分布?
- java - Spring Mongo 嵌套内部查询
- json - 如何编写将 golang 结构编码为具有混合类型的 json 数组的 proto3 消息?
- python - 比较两个文本文件并找到共同的时间戳