How to retrieve and display an embedded Firestore object with Angular?

Question

I would like to display a Firestore model containing a profile name and a list of describing hashtags with Angular 6.

Being new to Firestore I learned, that I should model it like this: enter image description here

members {
          id: xyz
                  {
                    name: Jones;
                    hashtag: {
                              global: true,
                              digital: true
                             }
          ...
         }
                              

Now, I try to understand how to display the keys of every hashtag property in my component list. My current code always displays [object Object] as result. My component code is:

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items$: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items$ = db.collection('Members').valueChanges();
    console.log(this.items$);
  }
}

My template code is:

<p>names and their interests</p>
<div *ngFor="let item of items$ | async">
  <h4>{{item.name}}</h4>
  <ul>
    <li>{{item.hashtag}}</li>
  </ul>
</div>

How can I fix this?

Answer 1

Think you're looking for (Angular 6.1):

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

What this will do is get the key and the value of the item.hastag and let them be used in hastag.