Kyl*_*gan 4 javascript angularjs firebase angularfire firebase-realtime-database
我已经阅读了有关此问题的所有问题,但我仍然没有找到答案.所以不要将其标记为重复.
我正在使用AngularFire和Angular 2以及Typescript.我正在使用FirebaseListObservable从端点中提取24条最新记录的列表.这是我的代码:
import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2';
@Component({
selector: 'story-list',
templateUrl: './story-list.component.html',
styleUrls: ['./story-list.component.scss']
})
export class StoryListComponent {
stories: FirebaseListObservable<any[]>;
constructor(af: AngularFire) {
this.stories = af.database.list('/stories', {
query: {
limitToLast: 24
}
});
}
}
Run Code Online (Sandbox Code Playgroud)
这将按预期返回24个最新故事的列表,但是当我在页面上呈现它们时:
<p *ngFor="let story of stories | async">{{ story.title }}</p>
Run Code Online (Sandbox Code Playgroud)
它显示了最古老的故事,最新的故事在底部.我明白为什么会这样,而且我并没有声称这是一个问题,但我该如何扭转呢?我希望能够在查询中反转这一点,但如果这不可能,我会开放以某种方式在渲染中反转它.
无论您的答案是什么,请不要只链接到文档.没有AngularFire的文档可以完全解释这一点.我读过每一个字.请提供真实的工作代码.
但是,我绝对不会接受的一个解决方案是在创建时在记录中存储负数日期,然后根据该日期进行排序.这是我听过的最糟糕的解决方案,真正的数据库系统允许您在查询中执行此操作.所以请不要建议.
如果您有任何想法,我将不胜感激.我不想再使用其他产品,因为我喜欢Firebase.
car*_*ant 16
据我所知,Firebase查询始终按升序排列.
但是,您可以使用map运算符反转渲染列表的顺序,以反转AngularFire2observable 发出的数组:
import "rxjs/add/operator/map";
...
this.stories = af.database.list('/stories', {
query: {
limitToLast: 24
}
}).map((array) => array.reverse()) as FirebaseListObservable<any[]>;
Run Code Online (Sandbox Code Playgroud)
如果您更喜欢在模板中执行此操作,则可以查看此答案.
| 归档时间: |
|
| 查看次数: |
6070 次 |
| 最近记录: |