如何使用动态cols和行加载mat-table

Question

我有〜25个报告以表格格式显示，所以我使用以下方法从一个组件来实现此目的。

创建了一个单独的模块，从共享模块中导入了必要的依赖模块和服务。 报告ID将通过网址进行标识。

html

<div class="mat-elevation-z8" #TABLE>
      <table mat-table [dataSource]="dataSource">
        <div *ngIf="rpt=='r1'">               
              <ng-container matColumnDef="accountType">
                <th mat-header-cell *matHeaderCellDef> Column Desc </th>
                <td mat-cell *matCellDef="let e"> {{e.col1}} </td>
              </ng-container>
        </div>

    <div *ngIf="rpt=='r2'">  
        <!-- th & td -->    
    </div>      
        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
      </table>
    </div>

.ts

    ngOnInit() {
this.routeID = this.route.snapshot.paramMap.get('id');
switch (this.routeID) {
      case 'HeadAccounts': {
        this.rpt = 'r1';    
    this.columnsToDisplay = ['col1', 'col2'];    
        this.gets(this.rpt); // Calls web API
        break;
      }
      case 'Ledgers': {
        this.rpt = 'r2';       
    this.columnsToDisplay = ['col21', 'col22']; 
        this.gets(this.rpt); // Calls web API
        break;
      }
    //etc...

      default: {
        this.router.navigate(['']);
        break;
      }
    }
}