angular - 当 Angular Material 表中没有记录时，如何显示 "No records found"

Question

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

堆栈闪电链接: 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

Answer 1

使用 this.serviceDataSource.data.length 而不是 this.serviceDataSource.length 来获取数据源的长度。

检查 this

在 Material Design 页面中，您可以看到 MatTableDataSource 使用数据对象来操作数据。

Material Data Source