title: Angular2 - how to use the async pipe with non array result?
body: <p>In <a href="https://plnkr.co/edit/7kDczUZAYYh75vMLE45Y?p=preview" rel="nofollow noreferrer"><em>this</em></a>  Plunker I have this template : </p>
  
  <pre><code> &lt;span *ngFor="let a of Articles"&gt;{{a}}&lt;/span&gt;
  </code></pre>
  
  <p>This is the component class : </p>
  
  <pre><code>export class App
  {
      Articles: number[];
      constructor()
      {
          this.getData();
      }
      simualteDb()
      {
          return new Promise((a, b) =&gt;
          {
              setTimeout(function()
              {
                  a(
                  {    // notice , an object ,not an array
                      data: [0, 1, 2]
                  });
              }, 500)
          });
      }
      async getData()
      {
          this.Articles = (await this.simualteDb()).data;
      }
  }
  </code></pre>
  
  <p>This does work and I do see <code>012</code> in the output. But I want to use the <code>async</code> pipe.</p>
  
  <p>So I want my template to be : </p>
  
  <pre><code> &lt;span *ngFor="let a of Articles |async "&gt;{{a}}&lt;/span&gt;
  </code></pre>
  
  <p>But there is a problem.</p>
  
  <p><code>Articles</code> is not an array. It is an object with <code>data</code> prop which <em>is</em> the required array.</p>
  
  <p>I can't do something like this : </p>
  
  <pre><code>   &lt;span *ngFor="let a of Articles.data |async "&gt;{{a}}&lt;/span&gt;
  </code></pre>
  
  <p>I've created another <a href="https://plnkr.co/edit/lJHYEDT8u09YlJr84iEN?p=preview" rel="nofollow noreferrer">plunker</a> which  returns only an array : </p>
  
  <p>and It does work with <code>|async</code>.</p>
  
  <p><strong>Question:</strong></p>
  
  <p>Looking at my first code , How can I use the <code>async pipe</code> while still resolving an object and not an array ? </p>
  
  <pre><code>{data: [0, 1, 2]} 
  </code></pre>