title: split datasource into multiple mat tables
body: <p>I'm receiving multiple json objects (about current builds in Jenkins) from a backend server, and iterating through this and adding to a datasource. Now, the main problem I get is that I want all builds that are related to each other into same table, and then generate a new table for the next build. Generating the tables dynamically, went easy, but it generates a table for each build, where I'd like the same build to stick in the same loop.</p>
  
  <p>I've tried nesting ngFor loops in the html file, but I end up with the same outcome.</p>
  
  <p><a href="https://i.stack.imgur.com/RXERN.png" rel="nofollow noreferrer">multiple tables instead of three</a></p>
  
  <p>Trying to split the datasource into three datasources ended up breaking the ngFor loop generating the tables.</p>
  
  <p>html file:</p>
  
  <pre><code>  &lt;div *ngFor="let data of dataSources[0];"&gt;{{data.serviceName}}
      &lt;mat-table [dataSource]="dataSources" class="mat-elevation-z8"&gt;
        &lt;ng-container matColumnDef="jobnumber"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;Job Number&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=""&gt; {{data.jobNumber}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="name"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;Name&lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef=""&gt; {{data.serviceName}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  etc
  </code></pre>
  
  <p>ts file receiving from backend:</p>
  
  <pre><code>if ( incomingData !== null ) {
          incomingData.service.forEach(element =&gt; {
            element.forEach(service =&gt; {
              if ( service[7] === 'server') {
                let data= {
                  name : service[1],
                  duration: service[2],
                  timestamp : service[3],
                  result : service[4],
                  jobNumber : service[6],
                  serviceType : service[7],
                  serviceName : service[8]
                }
                this.foo.push(data);
              }
  
            });
          },
          this.dataSources.push(this.foo)
          );
  </code></pre>
  
  <p>The images shows 6 tables. I'd like three, where the name decides in which table the data should be shown. I.E. All Baz in one table and all Bar in one.</p>