title: ngFor inside ngFor
body: <p>I have Angular + Firebase app. 
  In one of my components i get elements from Firebase DB and binding them into template with *ngFor:</p>
  
  <pre><code>&lt;div *ngFor="let comment of (comments | async)&gt;
     &lt;div&gt;{{ comment.text }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But every <code>comment</code> also have <code>answers</code> list:
  <a href="https://i.stack.imgur.com/Py0Pa.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Py0Pa.png" alt="firebase db"></a></p>
  
  <p>How can i bind answers inside my loop, for example, something like this: </p>
  
  <pre><code>&lt;div *ngFor="let comment of (comments | async)&gt;
     &lt;div&gt;{{ comment.text }}&lt;/div&gt;
  
     &lt;div *ngFor="let answer of comment.answers"&gt;
       {{ answer.text }}
     &lt;/div
  &lt;/div&gt;
  </code></pre>
  
  <p>This structure does not work and return error: </p>
  
  <blockquote>
    <p>Cannot find a differ supporting object '[object Object]' of type
    'object'. NgFor only supports binding to Iterables such as Arrays.</p>
  </blockquote>