如何绕过Firebase返回数组中的随机ID并访问嵌套消息？

I see the issue here — Firebase Realtime Database stores list items as objects with auto-generated unique keys (like -LCE-36m4sdrPGFpusM6), which means your messages property is an object of message objects, not a flat array. When you try to display this object directly, Angular just renders [object Object] because it doesn't know how to iterate over the nested structure.

Here's how to fix this:

Step 1: Convert Firebase's Message Object to an Array #

In your TypeScript code, instead of assigning res[clientKey]['messages'] directly, use Object.values() to extract just the message data into an array. This strips out the auto-generated keys and gives you a clean array of your message objects.

Modified TypeScript code:

getUsersChat() { 
  let clientsKeys: Array<any>; 
  let i = 0; 
  console.log('obter chats ativados'); 
  this.mySegService.getChats().take(1).subscribe(res => { 
    clientsKeys = Object.keys(res); 
    this.totalNumberClients += clientsKeys.length; 
    clientsKeys.forEach(clientKey => { 
      // Note: The condition `i < ++i` is always true (it's equivalent to i < i+1)
      // If you meant to limit the number of clients, adjust this condition
      if (res[clientKey]['messages'] !== undefined) { 
        this.clientsShortList.push({ 
          name: res[clientKey]['name'], 
          // Convert messages object to array of message data
          messages: Object.values(res[clientKey]['messages']) 
        }); 
      } 
      i += 1; 
    }); 
    console.log(this.clientsShortList); 
  }); 
}

Step 2: Display Messages in Your HTML #

Now that chat.messages is an array, you can loop through it with *ngFor to display each message's details. For example, to show the message text and timestamp:

Updated HTML code:

<mat-list> 
  <mat-list-item *ngFor="let chat of clientsShortList"> 
    <mat-icon mat-list-icon>account_circle</mat-icon> 
    <h4 mat-line>{{chat.name}}</h4>
    <!-- Display messages -->
    <div mat-line *ngFor="let msg of chat.messages" class="message-item">
      <span class="timestamp">{{msg.date}} {{msg.hour}}:</span>
      <span class="message-text">{{msg.message}}</span>
    </div>
    <button mat-button>see more</button> 
  </mat-list-item> 
</mat-list>

Bonus: Keep the Firebase Key (If Needed) #

If you ever need to reference the auto-generated key (for updating/deleting messages later), use Object.entries() instead to retain both the key and message data:

messages: Object.entries(res[clientKey]['messages']).map(([key, data]) => ({
  id: key,
  ...data
}))

This will give you an array of objects like { id: "-LCE-36m4sdrPGFpusM6", date: "2018/5/11", ... }.

Also, a quick side note: The condition i < ++i in your original code is redundant because it will always evaluate to true (since it's comparing i to i+1). If you intended to limit the number of clients added to clientsShortList, adjust that condition to something like i < 5 (for the first 5 clients).

内容的提问来源于stack exchange，提问作者Kevin Dias