在单个模板中添加多个角度材质表

Question

  

在下面的图片中，我在每个标签中都标记了标签我想要角度材料数据表请帮我如何使用angular 4实现它   如果我更改第二列的数据源名称，则不接受

Answer 1

-- HTML code -------------

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Tabs with text labels</h2>
    <mat-tab-group class="demo-tab-group">
      <mat-tab label="Tab 1">
        <div class="demo-tab-content">
         <mat-table [dataSource]="dataSource>
          <ng-container matColumnDef="countryname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Coloumn Header Name </mat-header-cell>
      <mat-cell *matCellDef="let abc">
        {{abc.your value from displayedColumns1}}
      </mat-cell>
    </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>
        </div>
      </mat-tab>
      <mat-tab label="Tab 2">
       <mat-table [dataSource]="dataSource2>
          <ng-container matColumnDef="countryname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Coloumn Header Name </mat-header-cell>
      <mat-cell *matCellDef="let abc">
        {{abc.your value from displayedColumns2}}
      </mat-cell>
    </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>
      </mat-tab>
      <mat-tab label="Tab 3" disabled>
         <mat-table [dataSource]="dataSource3>
          <ng-container matColumnDef="countryname">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Coloumn Header Name </mat-header-cell>
      <mat-cell *matCellDef="let abc">
        {{abc.your value from displayedColumns3}}
      </mat-cell>
    </ng-container>
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
         </mat-table>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>

-----------ts code -----------------
 displayedColumns = ['a', 'b', 'c', 'd'];
  dataSource;
   displayedColumns = ['a', 'b', 'c', 'd'];
  dataSource1;
   displayedColumns = ['a', 'b', 'c', 'd'];
  dataSource1;