title: Angular2 async pipe not working in ngfor
body: <p>I am experiencing a problem with async pipe in Angular2, when I use it inside a <code>*ngFor</code>.</p>
  
  <p>Here some code:</p>
  
  <p>This is the template</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;li *ngFor="#obj of _filtersPageState | async"&gt;
          hello world
  &lt;/li&gt;
  </code></pre>
  
  
  
  <p>The <code>_filtersPageState</code> variable is declared as:</p>
  
  <pre><code>private _filtersPageState: Observable&lt;any&gt; = new Observable&lt;any&gt;();
  </code></pre>
  
  <p>and it is initialized by using the <code>select</code> function of <code>@ngrx/store</code>:</p>
  
  <pre><code>this._filtersPageState = store.select('FiltersPageState');
  this._filtersPageState.subscribe(v =&gt; console.log(v));
  </code></pre>
  
  <p>The <code>FiltersPageState</code> object inside the store is populated through a http request and if I print the <code>@ngrx/store</code> object in the console log, I can see that the get request is correctly performed.</p>
  
  <p>My problem here is that when the <code>async</code> pipe is placed inside the <code>ngFor</code>, the component fails to load and I get no errors in the Chrome console.</p>
  
  <p>If I write <code>{{_filtersPageState.value | async}}</code> in the html template, the value of the <code>Observable</code> is displayed correctly.</p>
  
  <p>I'm playing with beta 13</p>
  
  <p>Any clue or suggestion? Thank you!</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I noted that if I write <code>{{_filtersPageState| async}}</code> inside the template and in the same time I write an <code>ngFor</code> (even doe this one cycles on a simple array without <code>async</code> pipe, my component breaks (silently)</p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>I want to add another tile to the puzzle. </p>
  
  <p>The following template breaks the Component:</p>
  
  <pre><code>{{_filtersPageState | async}}
  &lt;li *ngFor="#obj of simpleArray"&gt;
          {{obj}}
  &lt;/li&gt;
  </code></pre>
  
  <p>It's like if <code>async</code> and <code>ngFor</code> don't want to be together :(</p>
  
  <p><strong>Edit 3</strong></p>
  
  <p>I found out that no pipe is working inside ngFor:</p>
  
  <pre><code>&lt;h1 *ngFor="#element of filtersPageState|async"&gt;{{element}}&lt;/h1&gt;
  &lt;h1 *ngFor="#element of simpleArray|uppercase"&gt;{{element}}&lt;/h1&gt;
  &lt;h1 *ngFor="#element of simpleArray"&gt;{{element|uppercase}}&lt;/h1&gt;
  &lt;h1 *ngFor="#element of simpleArray|aaaaaaaaa"&gt;{{element}}&lt;/h1&gt;
  </code></pre>
  
  <p>in all four cases (also with <code>aaaaaaaaa</code> that is a non existing pipe), my Component fails to load with no error.</p>