AngularFire2 - 加入會員和用戶

我想列出的AngularFire2應用用戶的對話，這strucutre如下：AngularFire2 - 加入會員和用戶

聊天

"chat1": { 
    title: "First chat", 
    lastMessage: "Hello world", 
    members: { 
    "user1": true, 
    "user2": true, 
    } 
}

用戶

"user1": { 
    name: "Ben", 
    surname: "Bennsay" 
} 
"user2": {...}

我想以一種方式映射和列出聊天記錄，我可以輕鬆地在最後一條消息的下面顯示聊天參與者名稱。

問題1：這個例子與官方的建議略有不同，但我覺得它仍然是有效的和可擴展的。我對嗎？

問題2：如何真正加入成員和用戶在我的聊天列表中有一個users數組？

這是我到目前爲止。

// retrieve chats "user1" participates in 
this.afChatsRef = this.af.database.list(this.datastore(), { 
    query: { 
    orderByChild: "/members/user1", // by user id in members 
    equalTo: true, 
    } 
}).map(chats => { 
    chats.map(chat => { 
     // HMMM? WHAT TO DO HERE ? 
    }); 
    return chats; 
});

謝謝，提前。

更新我也試過以下，這似乎不太正確（我不能訪問用戶屬性）。

this.af.database.list(this.datastore()).map(chats => { 

      chats.map(chat => { 
       // chat.users = []; 

       for (var key in chat.members) { 
        this.af.database.object("https://stackoverflow.com/users/" + key).subscribe(user => { 
         chat.members[key] = user; 
        }); 
       } 

       return chat; 
      }); 

      console.log(chats); 
      return chats; 
     });

來源

2016-12-26 Romain Bruckert

您想要返回嵌套的地圖並獲取其中的用戶。像這樣的東西;

// retrieve chats "user1" participates in 
this.afChatsRef = this.af.database.list(...).map(chats => { 
    // Note the return! 
    return chats.map(chat => { 
     // Avoid side effects by storing members separate from the keys 
     chat.memberData = {}; 
     // Iterate keys and download members 
     Object.keys(chat.members||{}).forEach(uid => { 
      // `users` represents a service to cache and load users on demand 
      chat.memberData[uid] = users.load(uid); 
     }); 
    }); 
    return chats; 
});

下面是與高速緩存創建用戶服務的好方法：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { AngularFireDatabase } from 'angularfire2/database'; 

@Injectable() 
export class UserProvider { 
    db: AngularFireDatabase; 
    users: Map<String, Observable<User>>; 

    constructor(db: AngularFireDatabase) { 
    this.db = db; 
    this.users = new Map(); 
    } 

    load(userid:string) : Observable<User> { 
    if(!this.users.has(userid)) { 
     this.users.set(userid, this.db.object(`members/${userid}`).valueChanges()); 
    } 
    return this.users.get(userid); 
    } 
} 

export interface User { 
    name:string; 
    nick:string; 
}

這裏是異步的working example加入在AngularFire2。

來源

2017-12-21 16:58:48 Kato

AngularFire2 - 加入會員和用戶

回答

相關問題