角度-如何显示对象数组

Question

I have a basic Firestore collection query. I've added each of the returned items into an array of objects. What I'd really like to do is loop over these in the HTML and display the key and value.

  firestore_albums = [];

...

  getData() {
    this.db.collection(`users/myid/albums`).get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        this.firestore_albums.push({ ...data });
      });
    })

HTML

<div *ngFor="let item of firestore_albums | keyvalue">
    {{item.key}}:{{item.value}}
  </div>

Unfortunately, this just returns:

0:[object Object]

1:[object Object]

Answer 1

This seemed to work!

<ul>
    <li *ngFor="let item of firestore_albums">
        <ul>
            <li *ngFor="let key of item | keyvalue">
                <div>{{key.key}}</div>
                <div>{{key.value}}</div>
            </li>
        </ul>
    </li>
</ul>