angular - 当角度材料表中没有记录时，如何显示“未找到记录”

Question

当没有表数据时，我尝试使用下面的 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>

以下是我得到的错误：

错误类型错误：无法读取未定义的属性“长度”

标签： angularangular-materialmat-table

Answer 1

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

检查这个

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

材料数据源