使用AngularFirestore Collection orderBy with snapShotChanges方法

我在Angular應用程序中使用AngularFire2的代碼如下。使用AngularFirestore Collection orderBy with snapShotChanges方法

打字稿：

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 }; 
     }); 
    }); 
}

HTML：

<md-list> 
    <md-list-item *ngFor="let book of books | async"> 
     <h4 md-line>{{book.name}}</h4> 
    </md-list-item> 
</md-list>

此代碼檢索並結合預期的數據（當採集更新刪除項目），現在我想通過給定列到集合排序。我試圖使用firebase orderBy子句，但我無法弄清楚如何使用snapShotChanges()方法。

來源

2017-10-08 Nalaka526

你試過：'this.books = this.booksCollectionRef.orderBy（ '名稱'， '說明'）snapshotChanges（）地圖（ Action'> –

@GalBracha也不起作用'Property'orderBy'不存在於類型'AngularFirestoreCollection''' – Nalaka526

您是否嘗試過TypeScript的默認'sort（）'函數？如果不是，請向我們提供你的'this.books'的結構。 –

下應您的使用情況下工作：

this.booksCollectionRef = db.collection<Book>('books', ref => ref.orderBy('order field'));

看看在documentation of AngularFirestore關於此主題的更多信息。

來源

2017-10-11 10:56:03

但我找不到一種方法來使用refSorderCynges方法''snapShotChanges'方法，你能給我一個示例代碼... – Nalaka526

它應該工作，如果你只是用你的構造函數中的第一行替換一個我發佈。看看我鏈接的頁面底部的示例應用程序，他們使用這種方法結合valueChanges（） –

我試過了，它沒有給出任何錯誤，但沒有排序... – Nalaka526

對Angular Fire沒有把握，但您可以嘗試直接使用Firebase Firestore庫。

下面的代碼對我的作品：

someCollectionRef 
.orderBy('columnName') 
.onSnapshot((snapshot) => { 
snapshot.docChanges.forEach(function (change) { 
...doStuff

來源

2017-10-11 17:09:11

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 }; 
    }); 
});

來源

2017-10-14 03:00:19

拯救生命。此代碼適用於w/ionic，angular2fire和firestore。 – gamengineers

使用AngularFirestore Collection orderBy with snapShotChanges方法

回答

相關問題