如何在数据表角度材料中显示空消息，如果未找到数据答案

【问题标题】：How to show empty message in data table angular material, If no data found如何在数据表角度材料中显示空消息，如果未找到数据
【发布时间】：2018-05-03 07:49:06
【问题描述】：

我正在使用此代码

 <mat-table #table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="tache">
    <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outil">
    <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>
  </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
  </mat-row>
</mat-table>

那么，如何在数据表中显示空消息“No Record found”。

【问题讨论】：

您能否详细说明未找到数据的含义？
如果数据源为空，我必须显示“未找到记录消息”

标签： angular

【解决方案1】：

使用 Angular Material 10 或更高版本如果您想在没有数据匹配过滤器时显示消息，可以使用 *matNoDataRow 指令。

 <tr class="mat-row" *matNoDataRow>
  <td class="mat-cell" [attr.colspan]="displayedColumns.length">
    No data matching the filter.
  </td>
</tr>

【讨论】：

如果使用<mat-table> 而不是<table>，那么只需将<div *matNoDataRow>No data</div> 放入<mat-table>。虽然它仍然无助于隐藏<mat-paginator>，如果你有一个
您可以通过以下方式获得更好的 colspan：<td [colSpan]="displayedColumns.length">

【解决方案2】：

就像虫子说的，你可以用*ngIf。在此处比较这两个表：

https://stackblitz.com/edit/angular-w9ckf8

<mat-toolbar color="primary">My empty table</mat-toolbar>

<mat-table #table [dataSource]="dataSourceEmpty" matSort *ngIf="dataSourceEmpty.length > 0">
    <ng-container matColumnDef="Name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Age">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
</mat-table>

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

<hr>

<mat-toolbar color="primary">My full table</mat-toolbar>

<mat-table #table [dataSource]="dataSource" matSort *ngIf="dataSource.length > 0">
    <ng-container matColumnDef="Name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Age">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
</mat-table>

<div *ngIf="dataSource.length === 0">No data</div>

带数据的 TS：

displayedColumns = ['Name', 'Age']
dataSource = [{name:'Sara',age:17}, {name: 'John', age: 20}]
dataSourceEmpty = []

【讨论】：

thx 我用 No records found 消息修复了它
酷，很高兴我能帮上忙
该示例依赖于一个简单的数据源，即 JS 数组。当使用 Angular 在 @angular/cdk/collections/typings/data-source.d.ts 中提供的抽象类 DataSource 的实例时，你有什么建议？
当你尝试设置 dataSource.sort = matSort 时，你会得到一个未定义的错误，因为 @ViewChild(MatSort) sort: MatSort;在表可用之前将是未定义的。如果您从表中删除 matSort 指令，就可以了。您也可以将您的表放在另一个组件中，并在父组件中处理“无结果”，以便在有数据时立即启动表、数据源和 matsort。
@LeonardoRick 如果要保留列，请在我的示例中删除第 8 行的 *ngIf="dataSourceEmpty.length > 0" 行。

【解决方案3】：

你可以这样把它放在页脚行：

列定义：

<ng-container matColumnDef="noRecord">
      <td mat-footer-cell *matFooterCellDef>No records found.</td>
</ng-container>

页脚行定义：

<ng-template [ngIf]="dataSource.data.length === 0">
    <tr mat-footer-row *matFooterRowDef="['noRecord']"></tr>
</ng-template>

【讨论】：

这看起来是一个很有前途的解决方案，因为页脚行的样式应该很好地匹配，但是很难从这些部分组装，请您展示完整的 HTML 模板吗？
@chrisinmtown: 把这个放在里面例如：没有找到记录。 ng-template>
我也试过这个解决方案，但它对我不起作用。当我删除一个对象并且表变空时，该行不会显示。当我重新加载页面时，它会显示出来，但是在添加对象时，该行不会消失。这很奇怪。谁能为此提供一个工作示例？

【解决方案4】：

如果您使用 console.log 数据源，您将看到以下内容： dataSource example

数组不是dataSource本身，而是dataSource.data。 dataSource 实际上是一个类，它的属性 data 包含您传递给 MatTableDataSource (https://github.com/angular/material2/blob/master/src/lib/table/table-data-source.ts) 的内容。因此，这就是您应该在 *ngIf 语句中使用的内容。

<div *ngIf="dataSource.data.length === 0">
No Records Found!
</div>

希望这会有所帮助！

【讨论】：

以防万一有人在使用过滤器，那么您需要检查data.filteredData.length === 0
这对我不起作用！ html 无法获取内部 .data 属性 .data.length 破坏代码。即使在此之后 this.dataSource = new MatTableDataSource(); this.dataSource.data = [];

【解决方案5】：

在html中有两种方式显示错误信息

使用If方法的第一种方法

<div *ngIf="dataSource.length">
  <mat-table #table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="tache">
    <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outil">
    <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>
  </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
  </mat-row>
</mat-table>
</div>

<div *ngIf="!dataSource.length">
No Record found
</div>

第二种方法使用If else

<div *ngIf="dataSource.length; else noRecord">
  <mat-table #table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="tache">
    <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outil">
    <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>
  </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
  </mat-row>
</mat-table>
</div>

<ng-template #noRecord>
 <div>
  No Record found
  </div>
</ng-template>

【讨论】：

【解决方案6】：

<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.filteredData.length==0)}"></mat-footer-row>

我能够通过这样做来解决问题。 hide 是自定义 css

.hide{
    display:none;
}

【讨论】：

很好的解决方案，但不是隐藏您可以使数组动态 matFooterRowDef="['noData']" 并添加列名，以防仅当您想显示 NOT FOUND 消息时

【解决方案7】：

在你的component-name.component.html:

<div class="mat-elevation-z8">
    <mat-table [dataSource]="listData" matSort>
        <ng-container matColumnDef="fullName">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Full Name</mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.fullName}}</mat-cell>
        </ng-container>
        ...
        ...
        <ng-container matColumnDef="noData">
            <mat-footer-cell *matFooterCellDef colspan="6">
                No data.
            </mat-footer-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

        <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>

在您的style.scss 或component-name.component.scss 中定义.hide 类

.hide { display: none; }

仅此而已:)

【讨论】：

这对我有用。我只是改为通过 dataSource.filteredData.length 进行检查

【解决方案8】：

在较新的 Angular 版本中，如果您的数据源类型为 MatTableDataSource，请不要忘记 datasource.data。

示例：

在 TypeScript 文件中：

// ...
datasource = new MatTableDataSource<object>([]);
// ...

在 HTML 文件中：

<div *ngIf="datasource.data.length > 0"> 
  <!--Show the table.-->
</div>

<div *ngIf="datasource.data.length === 0">
 <!--Show table is empty message. -->
</div>

【讨论】：

对我来说失败了。 Cannot read properties of null (reading 'length')

【解决方案9】：

如果有人使用filter 和dataSource，你应该注意dataSource.filteredData.length。

即

if (this.dataSource.filteredData.length < 1) {
  this.presentDialog();
}

或

<div class="container" *ngIf="dataSource.filteredData.length < 1">
    // Your message here...
</div>

【讨论】：

【解决方案10】：

步骤#0

在ts中

  dataSource: any = new MatTableDataSource()

步骤#1

      <table [dataSource]="dataSource">

        <ng-container matColumnDef="nodata">
          <td mat-footer-row *matFooterCellDef [colSpan]="displayedColumns.length" 
          style="text-align: center;">No Data Available</td>
        </ng-container>

       <tr mat-footer-row 
         [hidden]="dataSource.data.length >0"
        *matFooterRowDef="['nodata']">
       </tr>

     </table>

【讨论】：

【解决方案11】：

您可以简单地使用*ngIf 指令来检查dataSource 是否不为空。

 <mat-table *ngIf="dataSource.length > 0" #table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="tache">
    <mat-header-cell *matHeaderCellDef mat-sort-header> tâche </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.tache}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="outil">
    <mat-header-cell *matHeaderCellDef mat-sort-header> outil </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.outil}} </mat-cell>
  </ng-container>  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
  </mat-row>
</mat-table>

<p *ngIf="dataSource.length === 0">No records found</p>

【讨论】：

您可以编辑您的问题以发布您的dataSource吗？

【解决方案12】：

在 .ts 文件中

if (this.dataSource.length == 0) {
    this.noDataMessage = true;
} else {
    this.noDataMessage = false;
}

在 .html 文件中

<div *ngIf="noDataMessage">
    <p>{{ 'label.DataNotAvailable' | translate }}</p>
</div>

【讨论】：

【解决方案13】：

对于可以在页脚中执行此操作的任何人，我可以通过在 Angular 6/7/8 中执行以下步骤来执行此操作：

1) 在你的 [ComponentName].component.html

<table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="columneName">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.columnname}} </td>
            <td mat-footer-cell *matFooterCellDef>
                <!-- Display a download button in the footer when data is available-->
                <button mat-raised-button color="primary" 
*ngIf="dataSourceTable.data.length > 0">Download</button>
                <!--Below code is displayed when there is no data-->
                <a mat-button *ngIf="dataSourceTable.data.length === 0">No Data 
Found</a>
            </td>
        </ng-container>
        <!--Below Lines of code generates Header, Row and footer for your table  -->
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;">
        </tr>
        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
    </table>

【讨论】：

【解决方案14】：

您可以直接在数据源上添加条件，而无需访问数据或其长度：

<div *ngIf="!yourDataSource" class="alert alert-primary" role="alert">No data </div>

【讨论】：

【解决方案15】：

你可以使用 HTML hidden 属性来实现同样的事情

<tr [hidden]="dataSource.data.length > 0" mat-footer-row *matFooterRowDef="['noRecord']" ></tr>

【讨论】：

【解决方案16】：

这对我有用：

<ng-container matColumnDef="noRecords">
  <td mat-footer-cell *matFooterCellDef>
    No records found
  </td>
</ng-container>

<tr mat-footer-row *matFooterRowDef="!dataSource.filteredData.length ? ['noRecords'] : []" colspan="2"></tr>

另请注意，如果您已经使用页脚，则可能必须为每一行添加一个<td mat-footer-cell *matFooterCellDef></td>。

【讨论】：

不错的解决方案，但 colspan 应该设置在 <td> 元素上。您可以添加它：<td mat-footer-cell *matFooterCellDef [colSpan]="displayedColumns.length">。尽管如此，现在最好的方法是@rrr 提出的方法：stackoverflow.com/a/63185957/690691

【解决方案17】：

我的解决方案不改变页脚，并通过使用 CSS 并在页脚添加一个框 :before 在实际表格中显示消息：

首先是一些 CSS：

td.no-content {
  padding-top: 7rem;
}

td.no-content:before {
  content: attr(data-empty-message);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 3rem 0 3rem 0;
  background-color: white;
}

然后在没有显示任何内容时将 no-content 类添加到页脚 TD：

<td mat-footer-cell *matFooterCellDef 
    [class.no-content]="dataSource.filteredData.length === 0" 
    data-empty-message="Nothing found..."
>

【讨论】：

【解决方案18】：

如果数组为空，我会收到运行时错误“无法读取未定义的属性‘长度’”。通过首先检查空值来解决它，如果为真则不进行长度测试，因此不会导致错误。即

<tr *ngFor="let category of _projectCategories">
        <td>
            {{ category.name }}
        </td>
        <td>
            {{ category.description }}
        </td>
        <td>
            {{ category.group }}
        </td>
        <td>
            <i class="nc-icon" [class.nc-check-2]="category.active"
                [class.nc-simple-remove]="!category.active"></i>
        </td>
    </tr>
    <tr *ngIf="(_projectCategories==null) || (_projectCategories.length == 0)">
        <td colspan="2">
            Project currently has no categories.
        </td>
    </tr>

【讨论】：

【解决方案19】：

在你的表中添加这个

   <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="9999">No Transactions yet!</td>
    </tr>

【讨论】：