title: How set a dynamic dataSource with mat-table with a ngFor?
body: <p>I'm making a dashboard with Angular Material. On that dashboard I want to show a card for each server (so far so good) and within that card I want to show a table with the customers on that specific server. That's where I get stucked.</p>
  
  <p>When use my code below, I get the following error (for every table):</p>
  
  <pre><code>ERROR Error: Could not find column with id "name".
  </code></pre>
  
  <p>My relevant code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-card class="card" *ngFor="let listItem of serverList; let i = index"&gt;
    &lt;mat-card-header&gt;
      &lt;div mat-card-avatar class="card-header-image"&gt;&lt;/div&gt;
      &lt;mat-card-title&gt;{{listItem.name}} - {{ listItem.datasource }}&lt;/mat-card-title&gt;
      &lt;mat-card-subtitle&gt;{{listItem.url}} - {{listItem.status}}&lt;/mat-card-subtitle&gt;
    &lt;/mat-card-header&gt;
    &lt;mat-card-content&gt;
      &lt;div class="table-container mat-elevation-z8"&gt;
        &lt;mat-table #table [dataSource]="listItem.datasource" matSort&gt;
          &lt;ng-container matColumnDef="klant"&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Klant &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt; {{ element.name }} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="status"&gt;
            &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Status &lt;/mat-header-cell&gt;
            &lt;mat-cell *matCellDef="let element"&gt; {{ element.status }} &lt;/mat-cell&gt;
          &lt;/ng-container&gt;
          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
          &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
        &lt;/mat-table&gt;
      &lt;/div&gt;
    &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.fbService.getServerList().subscribe( data =&gt; {
    this.serverList = data;
  });
  </code></pre>
  
  <p>Note: I use Firestore to store the servers and customers.</p>
  
  <p>Essencially my question is how can I set the [dataSource] dynamically:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-table #table [dataSource]="listItem.datasource" matSort&gt;
  </code></pre>
  
  <p>?</p>