title: *ngFor not working in Angular
body: <p>Trying to retrieve data from firebase using Angular.
  I have some data stored in Firebase and I want o show the data stored in third child.
  Here is how my firebase look.
  <a href="https://i.stack.imgur.com/OSGuR.png" rel="nofollow noreferrer">check this image screenshot of Firebase structure</a></p>
  
  <p>my component code is </p>
  
  <pre><code>this.id = this.route.snapshot.paramMap.get('id');
  if(this.id) {this.scheduleService.get(this.id).take(1).subscribe(p =&gt;    this.date =p);}
  </code></pre>
  
  <p>My Service code is below</p>
  
  <pre><code>getDates(){
      return this.db.list('date').snapshotChanges().map(action =&gt; {
        return action.map(
          item =&gt; {
            const $key = item.payload.key;
            const data = { $key, ...item.payload.val() };
            return data;
        });
      });
    }
  </code></pre>
  
  <p>And here is HTML code to show the data.</p>
  
  <pre><code>&lt;ul *ngFor="let item of date.artist1.avlTime"&gt;
    &lt;li&gt;
    {{item?.fromtimeAm}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am not sure what I am doing wrong.
  Tried different html type to get that third/fourth child data but nothing is working.</p>