title: Using *ngFor properly with the async pipe
body: <p>I am unable to access a property of an object provided by the async pipe if I build the access chain using *ngFor.</p>
  
  <p>In the example below, suppose that <code>Parking</code> in the test line and the <code>?.filter</code> two lines beneath represent the same key on the same object. The test line will evaluate to true, but the checked property does not. Why? How do I access the propery when stamping these out with *ngFor?</p>
  
  <p>(Additionally, how should I access <code>propName</code> on <code>compModel</code>? <code>{{(compModel | async)?.(filter.propName)}}</code> wouldn't work anyway.)</p>
  
  <pre><code>    &lt;fieldset class="filter-category-title"&gt;
        &lt;legend&gt;{{filter.name}}&lt;/legend&gt;
          &lt;label *ngFor="let instance of filter.options"&gt;
            test: {{(compModel | async)?.Parking}}
            &lt;input type="checkbox"
                   checked={{(compModel | async)?.(filter.propName)?.instance}}
                   (click)="amenityEmit({category: filter.propName, filter: instance, resetCategory: false})"&gt;
                   {{instance}}
          &lt;/label&gt;
      &lt;/fieldset&gt;
  </code></pre>
  
  <p>*this is <strong>not</strong> related to this question: <a href="https://stackoverflow.com/questions/33747069/problems-using-async-pipe-with-ngfor-in-angular2">Problems using async pipe with ngFor in Angular2</a></p>