使用AngularFirestore Collection orderBy和snapShotChanges方法

Nal*_*526 16 firebase typescript angularfire2 angular google-cloud-firestore

我在使用AngularFire2的Angular应用程序中有以下代码.

打字稿:

constructor(db: AngularFirestore) {
    this.booksCollectionRef = db.collection<Book>('books');

    this.books = this.booksCollectionRef.snapshotChanges().map(actions => {
        return actions.map(action => {
            const data = action.payload.doc.data() as Book;
            const id = action.payload.doc.id;
            return { id, ...data };
        });
    });
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<md-list>
    <md-list-item *ngFor="let book of books | async">
        <h4 md-line>{{book.name}}</h4>
    </md-list-item>
</md-list>
Run Code Online (Sandbox Code Playgroud)

此代码按预期检索和绑定数据(在更新集合时删除项目),现在我想按给定列对集合进行排序.我试图使用firebase orderBy子句,但我无法弄清楚如何使用它与snapShotChanges()方法.

ale*_*orf 32

以下内容适用于您的用例:

this.booksCollectionRef = db.collection<Book>('books', ref => ref.orderBy('order field'));
Run Code Online (Sandbox Code Playgroud)

有关此主题的更多信息,请查看AngularFirestore文档.

  • 但是我找不到使用 `ref.orderBy` 方法和 `snapShotChanges` 方法的方法,你能告诉我一个示例代码吗... (2认同)

Cla*_*len 5

this.announcementCollectionRef = afs.collection<Announcement>('announcements', ref => ref.orderBy('createdAt', 'desc'));
this.announcements = this.announcementCollectionRef.snapshotChanges().map(actions => {
    return actions.map(a => {
        const data = a.payload.doc.data() as AnnouncementId;
        const id = a.payload.doc.id;
        return { id, ...data };
    });
});
Run Code Online (Sandbox Code Playgroud)