javascript - AngularFirestoreCollection snapshotChanges 结果中的子查询数据

标签 javascript angular firebase ionic-framework google-cloud-firestore

我正在尝试查询一个集合并根据另一个查询返回更改数据结果。

我的聊天结构是这样的:

let chat = {
  id: "userId1" + "userId2",
  lastMessage: "",
  timestamp: "",
  title: ""
}

我需要拆分聊天ID,查询其中一个用户并将用户名设置为聊天标题。

我尝试这样做,但没有成功,也没有在模板上显示结果。

listChats(userId: string): Observable<any[]> {
return <Observable<any[]>>this.afs.collection(this.CHATS_COLLECTION)
  .snapshotChanges()
  .map((c) => {
    return c
      .filter((chat) => chat.payload.doc.id.startsWith(userId) || chat.payload.doc.id.endsWith(userId))
      .map(c => {
        const chatData = c.payload.doc.data() as Chat;
        const chatId = c.payload.doc.id;

        //the id here comes like "id1 + id2"
        let ids: string[] = c.payload.doc.id.split(this.SEPARADOR);

        //get the id 
        let id =  ids[0];

        //check in firebase the user row
        return this.afs.doc("users/" + id)
            .snapshotChanges()
            .map((c) =>{
                const data = c.payload.data() as User;
                let name = data.name;

                //Here I need to get the user name and set on the chat data
                chatData.title = name;

                return { chatId, ...chatData };

            });

      });

  });}

聊天页面.ts:

ionViewDidLoad() {

    this.chats = this.chatService.listChats(userId);

  }

在模板上显示聊天:

<ion-list no-line>
    <button ion-item *ngFor="let chat of chats | async" (click)="onOpenChat(chat)">
      <h2>{{chat.title}}</h2>
    </button>
  </ion-list>

最佳答案

使用 .valueChanges() 订阅可观察对象。

ionViewDidLoad() {

    this.chats = this.chatService.listChats(userId).valueChanges();

}

尝试这些改变

listChats(userId: string): Observable<any> {
return this.afs.collection(this.CHATS_COLLECTION)
  .snapshotChanges()
  .map((c) => {
    return c
      .filter((chat) => chat.payload.doc.id.startsWith(userId) || chat.payload.doc.id.endsWith(userId))
      .map(c => {
        const chatData = c.payload.doc.data() as Chat;
        const chatId = c.payload.doc.id;

        //the id here comes like "id1 + id2"
        let ids: string[] = c.payload.doc.id.split(this.SEPARADOR);

        //get the id 
        let id =  ids[0];

        //check in firebase the user row
        return this.afs.doc("users/" + id)
            .snapshotChanges()
            .map((c) =>{
                const data = c.payload.data() as User;
                let name = data.name;

                //Here I need to get the user name and set on the chat data
                chatData.title = name;

                return { chatId, ...chatData };

            });

      });

});}

关于javascript - AngularFirestoreCollection snapshotChanges 结果中的子查询数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48553590/

相关文章:

javascript - Javascript 继承链中的“this”关键字

javascript - 来自 PHP JSON 的数据未显示在 Chart JS 中

javascript - 如何设置 ASP.NET Core 2 来修复bundleconfig.json中的箭头函数

Angular 6 延迟加载路线

javascript - 在 firebase 上应用脚本成功进行身份验证

javascript - 使用 CryptoJS 加密,使用 Ruby/AES 解密

Angular Material Mat-table 不渲染数据

angular - webpack html-loaders 小写 Angular 2 内置指令

ios - 没有从 Firebase 控制台获取推送通知

ios - Firebase Pod 代码更改