Question

版本：Angular 4.4，Material beta-12

我想知道有什么方法可以在mat-table显示空结果或结果时显示自定义消息。

我已经阅读了很多材料和github问题并寻找其他任何替代方案。

Answer 1

尝试这样的事情

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

它将显示标题行，但不显示数据行。相反，它会显示＆＃34;没有结果＆＃34;消息。

设置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;
}

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

3 个答案: