title: Angular2 async nested data
body: <p>I have a Angular2 Component displaying some data in a table.</p>
  
  <pre><code>export class DiagnosisComponent {
  
    headers: Array&lt;String&gt; = ["hello world", "hello world"];
    table: Observable&lt;TableData&gt;;
  
    constructor(private eventService: EventService) {
      this.table = this.eventService.getDiagnosisEvents();
      this.table.subscribe(console.log.bind(console));
    }
  
  }
  </code></pre>
  
  <p>And here is the TableData class</p>
  
  <pre><code>export class TableData {
  
    content: Array&lt;any&gt;;
    paging: Paging;
  
    constructor(obj: any) {
  
      this.paging = {
        size: obj.size,
        totalElements: obj.totalElements,
        currentPage: 1
      };
  
      this.content = obj.content;
  
    }
  
  }
  
  export interface Paging {
    size: number;
    totalElements: number;
    currentPage: number;
  }
  </code></pre>
  
  <p>Now I want to bind the table.content Array to a *ngFor with a async pipe. My problem is that i need to get the nested data, and not the TableData itself.</p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;vpscout-filter&gt;&lt;/vpscout-filter&gt;
  
    &lt;table class="table"&gt;
      &lt;thead&gt;
      &lt;tr&gt;&lt;th *ngFor="let header of headers"&gt;{{header | translate}}&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr *ngFor="let row of table | async "&gt;
        &lt;td&gt;test&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Changing the *ngFor to <code>&lt;tr *ngFor="let row of table.content | async "&gt;</code> does not work.</p>