Открытие диалогового окна Angular Material, содержащего Mat-Table, приводит к тому, что диалоговое окно появляется без какого-либо содержимого

Question

Я пытаюсь открыть диалоговое окно углового материала, заполненное таблицей матов, содержащей список заказов.

Когда я вызываю метод openOrderDetailsDialog (), открывается диалоговое окно, но оно не содержитмат-стол сначала.Это пустой диалог.

Иногда мне нужно щелкнуть пустое диалоговое окно, которое открывается, чтобы таблица матов появилась внутри диалога, а иногда это происходит автоматически примерно через одну секунду.

Я не смог определить причину этой проблемы и был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление.

Заранее большое спасибо,

component.html

<div class="dialog-content">
    <mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="customerNumber">
            <mat-header-cell *matHeaderCellDef mat-sort-header>CustomerNumber</mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.customerNumber}} </mat-cell>
        </ng-container>

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

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

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

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

component.ts

@Component({
    selector: 'order-details',
    templateUrl: './order-details.component.html',
    styleUrls: ['./order-details.component.scss']
})
export class OrderDetailsComponent implements OnInit {
    displayedColumns = ['customerNumber', 'customerName', 'orderNumber', 'orderAmount'];
    dataSource: MatTableDataSource<Order>;
    @ViewChild(MatSort) sort: MatSort;

    constructor(public dialogRef: MatDialogRef<OrderDetailsComponent>,
        @Inject(MAT_DIALOG_DATA) public data: { orders: Order[] }) {
            this.dataSource = new MatTableDataSource();
         }

    ngOnInit() {
        this.dataSource.data = this.data.orders;
        this.dataSource.sort = this.sort;
    }

Метод для другого компонента, который открывает диалоговое окно:

openOrderDetailsDialog(event: any) {`enter code here`
    const dialogRef = this.dialog.open(OrderDetailsComponent,
        {
            panelClass: 'mat-dialog-md',
            data: { orders: event.target.data.orders }
        });
}