我尝试使用下面的 stackblitz 链接在没有表数据时显示“未找到记录”消息，但当我使用 MatTableDataSource 类型的数据源时会出现问题。

stackblitz 链接： https://stackblitz.com/edit/angular-w9ckf8

下面是我使用的代码片段：

this.serviceDataSource = new MatTableDataSource(this.services);

对应的 html：

<table mat-table [dataSource]="serviceDataSource" matSort *ngIf="serviceDataSource.length > 0">
            <ng-container *ngFor="let disCol of serviceColumns" matColumnDef="{{disCol}}">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{disCol}}</th>
                <td mat-cell *matCellDef="let rowValue">{{rowValue[disCol]}}</td>
            </ng-container>

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

        <div *ngIf="serviceDataSource.length === 0">No records found</div>

下面是我收到的错误：

ERROR TypeError: Cannot read property 'length' of undefined