title: Angular Material Table - Issues with async dataSource
body: <p>I'm trying to populate an Angular Material table with data loaded asynchronously from AWS DynamoDB, but the best I can do is render the table with the three expected items all returning properties in each cell as '[object Object]'.</p>
  
  <p>The process works like this:</p>
  
  <ul>
  <li>At AllInvoicesComponent.ngOnInit(), do buildTable(),</li>
  <li>Await DataService.getItems('invoices'),</li>
  <li>Assign dataSource as new MatTableDataSource(AllInvoicesComponent.invoices)</li>
  </ul>
  
  <p>The 'async' pipe also does absolutely nothing for the <code>dataSource</code> attribute of the <code>table</code>.</p>
  
  <p><strong>data.service.ts:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import * as aws from 'aws-sdk';
  import { Observable } from 'rxjs';
  import AuthService from '@app/services/auth.service';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class DataService {
  
    dynamodb;
    docClient;
  
    constructor(private auth: AuthService) {
      aws.config.credentials = new aws.Credentials(auth.credentials.accessKeyId, auth.credentials.secretAccessKey, null);
      aws.config.update({
          region: 'eu-west-1'
      })
  
      this.dynamodb = new aws.DynamoDB();
      this.docClient = new aws.DynamoDB.DocumentClient();
    }
  
    async getItems(tableName) {
      const params = {
          TableName: tableName
      }
  
      return new Promise((resolve, reject) =&gt; {
          this.dynamodb.scan(params, (err, data) =&gt; {
              if (err) {
                  reject(err);
              } else {
                  resolve(data.Items);
              }
          })
      })
    }
  }
  </code></pre>
  
  <p><strong>all-invoices.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { Observable, from } from 'rxjs';
  import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
  
  import Invoice from '../invoice.interface';
  import { DataService } from '../../services/data/data.service';
  
  @Component({
    selector: 'app-all-invoices',
    templateUrl: './all-invoices.component.html',
    styleUrls: ['./all-invoices.component.scss']
  })
  
  export class AllInvoicesComponent implements OnInit {
  
    invoices;
  
    dataSource: MatTableDataSource&lt;any&gt;;
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    tableColumns = [
      'number',
      'reference'
    ]
  
    constructor(private database: DataService) {
  
    }
  
    ngOnInit() {
      this.buildTable();
    }
  
    async buildTable() {
      try {
          this.invoices = await this.database.getItems('invoices');
          this.dataSource = new MatTableDataSource(this.invoices);
      } catch(err) {
          console.error(`Error retrieving invoices: ${err.Message}`);
          // TODO:
      }
    }
  
  }
  </code></pre>
  
  <p><strong>all-invoices.component.html:</strong></p>
  
  <pre><code>&lt;p&gt;All Invoices&lt;/p&gt;
  
  &lt;br&gt;
  
  &lt;div class="spinner-container" *ngIf="dataSource.loading$ | async"&gt;
    &lt;mat-spinner&gt;&lt;/mat-spinner&gt;
  &lt;/div&gt;
  
  &lt;table mat-table [dataSource]="dataSource" matSort&gt;
  
    &lt;ng-container matColumnDef="number"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Number&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let invoice"&gt;{{invoice.number}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="reference"&gt;
      &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Reference&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let invoice"&gt;{{invoice.reference}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="tableColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: tableColumns"&gt;
  
  &lt;/table&gt;
  
  &lt;mat-paginator [length]="dataSource.length" [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 50]"&gt;&lt;/mat-paginator&gt;
  </code></pre>