Я пытался использовать setTimeout (), и я даже пытался использовать [скрытый] вместо ngIf. Я также попытался поместить paginator вне элемента, заключенного в ngIf. Я буду обновлять свой вопрос по мере того, как буду проводить дополнительные исследования, но если кто-нибудь сможет указать мне правильное направление, это было бы здорово. Ниже приведен код HTML:
<div fxLayout="row" fxLayoutAlign="center" class="report-container">
<mat-card fxFlex.lg="98" fxFlex.md="98" fxFlex.sm="98" fxFlex.xs="98" *ngIf="!loading">
<div fxLayout="row" fxLayoutAlign="space-between none">
<mat-form-field>
<mat-label>Report Type</mat-label>
<mat-select [value]="reportOptions[0].path">
<mat-option *ngFor="let option of reportOptions" [value]="option.path" routerLink="{{ option.link }}">
{{ option.path }}</mat-option
>
</mat-select>
</mat-form-field>
<mat-search-bar matInput (keyup)="applyFilter($event.target.value)"></mat-search-bar>
</div>
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="column1">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Column1</th>
<td mat-cell *matCellDef="let element">
<div class="mat-conventions text-data">
{{ element.column1 }}
</div>
</td>
</ng-container>
<ng-container matColumnDef="column2">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Column2</th>
<td mat-cell *matCellDef="let element">
<div class="mat-conventions text-data">
{{ element.column2 }}
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</mat-table>
<mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
</mat-card>
<div fxFlex.lg="98" fxFlex.md="98" fxFlex.sm="98" fxFlex.xs="98" *ngIf="loading" fxFill>
<div fxLayout="row" fxLayoutAlign="center center">
<mat-spinner *ngIf="loading" class="spinner-loading"></mat-spinner>
</div>
</div>
</div>
А вот код машинописи с ngOnInit и ngAfterViewInit:
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private apollo: Apollo) {}
ngOnInit() {
this.dataSource = new MatTableDataSource(this.reportData());
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator
}