title: how can i loop through array of objects from firestore (array union objects)
body: <p>I have a comments array field that has two objects in the firestore database. </p>
  
  <p><a href="https://i.stack.imgur.com/Zw8N9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zw8N9.png" alt="enter image description here"></a></p>
  
  <p>it returns this in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/qqMzG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qqMzG.png" alt="enter image description here"></a></p>
  
  <p>I have tried to loop through the array with the code below, but with no luck. What am I doing wrong? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ion-card style="margin-top: 10px !important;" *ngFor ="let comment of comments"&gt;   
      &lt;ng-container *ngFor="let item of comment?.comments"&gt;
         &lt;div style="color: black"&gt;&lt;h6&gt;{{item?.comment}}&lt;/h6&gt;&lt;/div&gt;
  
      &lt;/ng-container&gt;
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>comments: any = [];
  
  getData(){
    this.route.data.subscribe(routeData =&gt; {
      let data = routeData['data'];
      this.comments = [];
      if (data) {
        this.item = data;
        this.image = this.item.image;  
        this.comments.push(this.item.comments)
        console.log( this.comments ) 
      }
    })   
  }
  </code></pre>