Question

当没有表数据但我使用 MatTableDataSource 类型的数据源时，我尝试了下面的stackblitz链接以显示“找不到记录”消息。

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：无法读取未定义的属性'length'

Answer 1

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

Answer 2

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

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

或

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

Answer 3

在变量名之后放置?，此处将使用length。 i.e: serviceDataSource?.length

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

Answer 4

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

*ngIf="serviceDataSource?.length == 0"

Answer 5

使用this.serviceDataSource.data.length代替this.serviceDataSource.length来获取数据源的长度。

检查this

在“材料设计”页面中，您可以看到MatTableDataSource正在使用数据对象来操纵数据。

Material Data Source

Answer 6

您可以先检查变量iteft，然后再使用length属性，例如：

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

StackBlitz和No record found条消息

Answer 7

这是显示在 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>

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

7 个答案: