打开包含Mat-Table的Angular Material对话框会导致对话框不显示任何内容

Question

我正试图打开一个填充有包含订单列表的垫子表格的角材对话框。

当我调用方法openOrderDetailsDialog（）时，对话框将打开，但首先不包含mat-table。这是一个空对话框。

有时候，我需要单击打开的空对话框以使mat-table出现在对话框中，有时这会在大约一秒钟后自动发生。

我无法确定导致此问题的原因，如果有人能指出正确的方向，我将不胜感激。

非常感谢

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