[解決済み] AngularのMatPaginatorが初期化されない

質問

私は2つのコンポーネントを持っています。両方ともmat-tableとpaginatorsを持っており、ページネーションは1つのコンポーネントで動作し、コードは似ていますが、他のコンポーネントで動作していません。以下は私のhtmlです。

<div class="mat-elevation-z8">
    <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="col1">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column1 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col1}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="col2">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Column2 </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.col2}} </mat-cell>
        </ng-container>

        <!-- Different columns goes here -->

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

    <mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</div>

そして、以下はcomponent.tsでの私のコードです。

dataSource: MatTableDataSource<any>;
displayedColumns = ['col1', 'col2', ... ];

@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

同様のコードは他のコンポーネントでも動作しており、テーブルはページネーションで適切にレンダリングされています。

どんな助けでも本当に感謝します。

どのように解決するのですか？

私は同様の問題を、インスタンス化をタイムアウトで囲むことで解決しました。これを試してみてください。

setTimeout(() => this.dataSource.paginator = this.paginator);