mat-tab在数据源加载时显示消息，在空结果时显示消息

Question

版本：Angular 4.4，Material beta-12

我想知道有没有办法在mat-table有空结果或结果加载时显示自定义消息。

我经历了很多材料和github问题，并寻找任何其他选择。

Answer 1

尝试这样的事情

<mat-table> ... </mat-table>
<div *ngIf="noResults$ | async">No results</div>

它将显示标题行，但不显示数据行。相反，它将显示“无结果”消息。

设置noResults$将非常依赖于您的表如何从服务中检索数据，但是这样的事情可能会激发解决方案，

data$ = this.myService.getRowsOfData();

noResults$ = this.data$.map(d => d.length === 0).startWith(false);

---

编辑：

如果您愿意，可以将状态存储在DataSource中。

<div *ngIf="dataSource.empty">No results</div>

使用看起来像这样的数据源

empty = false;

connect(): Observable<MyData[]> {
  return Observable
    .of(whatever)
    .do(data => this.empty = !data.length);
}

Answer 2

*ngIf="!dataSource.data.length"

在我的机器上工作......但是A6。

Answer 3

试试这个。

app.component.ts

listData: MatTableDataSource<any>;
//assume no. of column = 6

app.component.html

//after ng-containers with mat-header-cell & mat-cell
<ng-container matColumnDef="loading">
   <mat-footer-cell *matFooterCellDef colspan="6">
      Loading data...
   </mat-footer-cell>
</ng-container>
<ng-container matColumnDef="noData">
   <mat-footer-cell *matFooterCellDef colspan="6">
      No data.
   </mat-footer-cell>
</ng-container>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listData!=null}">
   </mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}">
   </mat-footer-row>

style.css文件

.hide{
    display: none;
}