使用 AngularFire2 和 Firebase 获取连接数据时出错

Question

My database consists of two 'tables' with messages and users, with the messages having an senderID that matches an userID. I am using the following code to join these two together when fetching the data

this.messages = this.af.database.list(`/messages/1`)
    .map(messages => {
      messages.map(message => {
        this.af.database.object('users/' + message.sender)
          .subscribe(user => {
            message.userdata = user;
            console.log(message);
          });
        return message;
      });
      return messages;
    });

console.log on the message shows the structure I am after, however, when i use {{item.userdata.provider.displayName}} it gives me the following TypeError: Cannot read property 'provider' of undefined

Thankful for advice.

Answer 1

You can't depend on message.userdata being populated. You're making an asynchronous call to fetch the data from the server, but not waiting for all of the users to be downloaded before rendering your UI.

Additionally, you should consider the case that a user may not exist. So you won't be able to use {{item.userdata.provider.displayName}} without at least an trying item.userdata? first.

I'd guess there's a much better way to go about this, such as creating an item.getUserName() method that can handle these implementation details a bit more transparently and elegantly.