3

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

以下是我得到的错误：

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

4

7 回答 7

2

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

检查这个

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

材料数据源

于 2018-12-04T10:30:48.290 回答
0

如果您的数据来自 API，您可以在下面使用：

*ngIf="serviceDataSource?.length == 0"
于 2018-12-04T10:27:34.593 回答
0

这是显示在 angular 2+ 中找不到记录的最佳概念之一。

<p>
<input type="text" [(ngModel)]="name" />
</p>
<ng-container *ngIf="( items | filter : name) as result">
  <p *ngFor="let item of result">
    {{item.name}}
  </p>
  <p *ngIf="result.length === 0">No Result</p>  
</ng-container>
于 2021-03-21T13:16:51.707 回答
0

它不是因为serviceDataSource.length它的错误，因为你没有在控制器中实现，写：serviceDataSource=[]

于 2018-12-04T10:20:46.380 回答
0

您可以通过检查变量 itseft 来尝试，然后再获取以下length属性：

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

StackBlitz与No record found消息

于 2018-12-04T10:40:40.407 回答
0

问题在于serviceDataSource在初始化之前访问。最好进行未定义的检查或简单地将代码修改为 -

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

或者

<div *ngIf="serviceDataSource && serviceDataSource.length === 0">No records found</div>
于 2018-12-04T10:20:49.580 回答
0

在将在这里使用?的变量名后面加上一个length。i.e: serviceDataSource?.length

<div *ngIf="serviceDataSource?.length === 0">No records found</div>
于 2018-12-04T10:21:18.090 回答