title: Angular Material Table won't populate with external data on initial load
body: <p>I'm working on an Angular 6 project where I'm loading data in from an AWS DynamoDB table via Observable into a Material Table component. I used the angular-cli to generate the initial structure of the table, and then added my own service to fetch external data, since the example used hard coded data in an array.</p>
  
  <p>Everything seems to be working (I can see the correct data returned via console.log) except for the fact that on my initial load, the data that I'm returning from the observable isn't getting populated into the table. In fact if I inspect the "this.data" variable it seems like it's immediately getting set back to "undefined." If I select and change the number of results per page on the pagination component, the data returned by the observable is inserted.</p>
  
  <pre><code>connect(): Observable&lt;DynamoTableItem[]&gt; {
      // Combine everything that affects the rendered data into one update
      // stream for the data-table to consume.
      const dataMutations = [
          observableOf(this.data),
          this.paginator.page,
          this.sort.sortChange
      ];
  
      // Set the paginators length
      this.paginator.length = this.data.length;
  
      return merge(...dataMutations).pipe(map(() =&gt; {
          return this.getPagedData(this.getSortedData([...this.data]));
      }));
  }
  </code></pre>
  
  <p>I've put the project on stackblitz if someone wouldn't mind taking a look.</p>
  
  <p>To reproduce the issue:</p>
  
  <ol>
  <li>Go to: <a href="https://stackblitz.com/edit/mat-table-dynamo" rel="nofollow noreferrer">https://stackblitz.com/edit/mat-table-dynamo</a></li>
  <li>Notice there is no data in the table.</li>
  <li>Select the "Items per page" pulldown and change to a different value.</li>
  <li>The table populates with the data returned from the Observable.</li>
  </ol>
  
  <p>Thanks for your help!</p>