У меня ~ 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;
}
}
}