title: How to loop through array inside an observable using async pipe?
body: <p>I am consuming an API which returns a response like this:</p>
  
  <pre><code>case:1
  requests:[reqObj1,reqObj2,reqObj3]
  count:3
  message:"Found requests successfully."
  pagesCount:1
  </code></pre>
  
  <p>The Service:</p>
  
  <pre><code>listRequest(sort, records, pageNumber, queries?): Observable&lt;any&gt; {
      const updateQueries = this.gtn.getHeaders() as RequestOptions;
      updateQueries.params = queries;
      return this.http
        .get(globals.domain + '/team/requests/list/sortBy-' + sort + '/' + records + '/' + pageNumber + '/', updateQueries)
        .map(res =&gt; {
          this.responseData = res.json();
          return this.responseData;
        });
    }
  </code></pre>
  
  <p>This will return an Observable with the response object as mentioned above, I will get this observable in the component and assign it to the local observable in the component.</p>
  
  <p>Component:</p>
  
  <pre><code>this.requestResponse= this.rts.listRequest(sort, records, page, this.q);
  </code></pre>
  
  <p>I want to iterate over the array of request which is in the observable and i am using the async pipe in my html</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="request-items-inner" *ngFor="let request of requestResponse.requests | async"&gt;
  {{request.createdAt}}
  &lt;/div&gt;
  </code></pre>
  
  <p>but this does not display anything on the screen. And if i use <strong>*ngFor="let request of requestResponse| async"</strong> it gives an error in the console.</p>
  
  <p><a href="https://i.stack.imgur.com/VcEwe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VcEwe.png" alt="enter image description here"></a></p>