angular - Mat Table 在其自己的选项卡下以角度动态构建

Question

我的 Angular 组件中的组件（TS 文件）-

const test_data1: any[] = [
{
    name: 'John',
    id: 1,
    dateOfBirth: new Date(),
    address: 'add1'
  },
  {
    name: 'Sarah',
    id: 2,
    dateOfBirth: new Date(),
    address: 'add2'
  }
];

const test_data2: any[] = [
{
    name: 'John',
    id: 1,
    department: 'dept 1,
    manager: 'mgr_john'
  },
  {
    name: 'Bob',
    id: 2,
    department: 'dept 2',
    manager: 'mgr_bob'
  }
];
public tabColumns: Array<any> = [];
public dataSource: Array<any> = [];
public displayedColumns: Array<any> = [];    

ngOnInit() {
  this.tabs = ['tab1', 'tab2']
  this.tabColumns[0] = this.displayedColumns[0] = ['name', 'dateOfBirth1', 'address1'];
  this.dataSource[0] = {};
  this.dataSource[0].data = test_data;
  this.tabColumns[1] = this.displayedColumns[1] = ['name', 'department', 'manager'];
  this.dataSource[1] = {};
  this.dataSource[1].data = test_data2;
  ...
}

在这个示例中，我有 2 个表。但是，在应用程序中，选项卡的数量和选项卡中的表格内容是动态的。我想在其自己的选项卡下显示每个表（顶部有一个通用过滤器栏，用于过滤任何数学表数据）。我使用单个表（没有循环）进行了此操作，但是当我更新为使用数组时，UI 没有显示表数据。

HTML 代码 -

<div>
    <mat-form-field style="width:100% !important">
        <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Search">
    </mat-form-field>
</div>
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.name">                
   <table mat-table [dataSource]="dataSource[index]" matSort>
      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns[index]">
         <th mat-header-cell *matHeaderCellDef> {{col | uppercase}} </th>
         <td mat-cell *matCellDef="let element"> {{element[col]}} </td>
      </ng-container>
                
      <tr mat-header-row *matHeaderRowDef="displayedColumns[index]"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns[index];"></tr>
   </table>
</mat-tab>

用于排序和搜索的组件（TS 文件）代码 -

@ViewChild(MatSort, { static: false }) sort: MatSort;

ngAfterViewInit(): void {
  this.dataSource.foreach(source => {
     this.dataSource.sort = this.sort;
  });      
}

public doFilter = (value: string) => {
  this.dataSource.foreach(source => {
     this.dataSource.filter = value.trim();
  });
}

标签： angulartypescriptangular-materialmat-table