title: Async pipe with Observables
body: <p>Trying to mimic the HTTP requests, and to make a static data to be presented with the async pipe.</p>
  
  <p>ts:</p>
  
  <pre><code>footerContent$: Observable&lt;{ key: string, value: string }&gt;[] = ([
      of({ key: '1', value: 'a' }),
      of({ key: '2', value: 'b' }),
      of({ key: '3', value: 'c' })
  ])
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div *ngFor='let content of footerContent$ | async'&gt;
      {{content.value}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I'm getting an Array of Observables and the pipe doesn't seem to work</p>
  
  <blockquote>
    <p>ERROR Error: InvalidPipeArgument: '[object Object],[object
    Object],[object Object]' for pipe 'AsyncPipe'</p>
  </blockquote>
  
  <p>Then i tried another approach and switch to from operator (so i can get one observable object):</p>
  
  <pre><code>footerContent$: Observable&lt;{ key: string, value: string }&gt; = from([
      ({ key: '1', value: 'a' }),
      ({ key: '2', value: 'b' }),
      ({ key: '3', value: 'c' })
  ])
  </code></pre>
  
  <blockquote>
    <p>ERROR Error: Cannot find a differ supporting object '[object Object]'
    of type 'object'. NgFor only supports binding to Iterables such as
    Arrays.
        at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoChec</p>
  </blockquote>
  
  <p>Any suggestions why it doesn't work?</p>