title: How to retrieve and display an embedded Firestore object with Angular?
body: <p>I would like to display a Firestore model containing a profile name and a list of describing hashtags with Angular 6.</p>
  
  <p>Being new to Firestore I learned, that I should model it like this: 
  <a href="https://i.stack.imgur.com/mUQrj.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>members {
            id: xyz
                    {
                      name: Jones;
                      hashtag: {
                                global: true,
                                digital: true
                               }
            ...
           }
                                </code></pre>
  </div>
  </div>
  </p>
  
  <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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&lt;any[]&gt;;
    constructor(db: AngularFirestore) {
      this.items$ = db.collection('Members').valueChanges();
      console.log(this.items$);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My template code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;names and their interests&lt;/p&gt;
  &lt;div *ngFor="let item of items$ | async"&gt;
    &lt;h4&gt;{{item.name}}&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li&gt;{{item.hashtag}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I fix this?</p>