Как загрузить mat-таблицу с динамическими столбцами и строками - PullRequest
0 голосов
/ 15 ноября 2018

У меня ~ 25 отчетов для отображения в табличном формате, поэтому я использовал следующий способ для достижения этого из одного компонента.

Создан отдельный модуль, импортированы необходимые модули зависимостей и сервисы из общего модуля. Идентификатор отчета будет указан по URL.

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;
      }
    }
}
...