我制作了一个可以过滤的 MatTable。如果没有匹配过滤器的数据,我想使用 Angular Material 文档中提到的 *matNoDataRow 指令显示文本。但是,它不像 Angular Material 的示例那样工作。 有什么我忘了吗?或者这个指令还没有生效? 我使用 Angular 9.
这是我的桌子:
<mat-form-field color="accent" appearance="fill" >
<mat-label >Filter</mat-label>
<input matInput (keyup)="doFilter($event.target.value)" placeholder="filter this table" (click)="searching=true" #input >
<button mat-icon-button matSuffix (click)="input.value=''; doFilter(''); searching= !searching" color="accent">
<mat-icon *ngIf="!searching">search</mat-icon>
<mat-icon *ngIf="searching">clear</mat-icon>
</button>
</mat-form-field>
<div class="sticky-container" style="margin-top: 2em;">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort matSortActive="EXPIRY DATE" matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>CUSTOMER ID</th>
<td mat-cell *matCellDef="let customer; let i = index" class="no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.id}}</td>
</ng-container>
<ng-container matColumnDef="exDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header>EXPIRY DATE</th>
<td mat-cell *matCellDef="let customer; let i = index" class="table-bold no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.exDate | date: "dd.MM.yyyy"}}</td>
</ng-container>
<ng-container matColumnDef="companyName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>COMPANY / PARTNER</th>
<td mat-cell *matCellDef="let customer; let i = index" class="no-outline"
routerLink="/summary/customer/{{customerService.id}}">{{customer.companyName}}</td>
</ng-container>
<ng-container matColumnDef="export">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let customer; let i = index">
<button mat-icon-button matTooltip="export" (click)="export()">
<mat-icon color="primary">get_app</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" ></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (mouseover)="customerService.getId([row.id])"></tr>
<!-- Row shown when there is no matching data.-->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 30, 100, dataSource.data.length]" color="accent"></mat-paginator>
</div>
该功能仅在最新版本的 Angular (v10) 中可用。如果您切换文档以显示 v9(现在它显示 9.2.4),您会看到该功能不是 API 的一部分。
就是说,我也无法让它工作。即使在 Angular 10 中。:(
更新:我确实让它工作了。 (我正在使用 Angular 10.0.1)。我的工作代码看起来与您的实现方式一模一样。所以升级到 Angular 10 应该可以解决问题。
我同意杰西的观点。它在 Angular 10 中运行良好。您的代码没有任何问题。甚至我也做了同样的检查。
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data found</td>
</tr>
<tr class="mat-row no-data-row" *matNoDataRow>
<td class="mat-cell">No data matching the filter "{{input.value}}"</td>
</tr>
in scss file:
tr.no-data-row{
display: flex;
border-width: 0;
border-style: solid;
align-items: center;
box-sizing: border-box;
td{
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
word-wrap: break-word;
min-height: inherit;
height: 100%;
}
}
为了
*matNoDataRow
工作,dataSource
对象数组必须是空的,如下所示:
// *matNoDataRow hidden
dataSource: MatTableDataSource<Data>;
// *matNoDataRow revealed
dataSource = new MatTableDataSource<Data>([]);
// or
dataSource.data = [];