角材料 *matNoDataRow 不起作用

Question

我制作了一个 MatTable，您可以在其中进行过滤。如果没有与过滤器匹配的数据，我想使用 Angular Material 文档中提到的 *ma​​tNoDataRow 指令显示文本。但是，它不像 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 更新到版本 10。

Answer 1

该功能仅在最新版本的 Angular (v10) 中可用。如果您将文档切换为显示 v9（现在显示为 9.2.4），您将看到该功能不是 API 的一部分。

也就是说，我也无法让它工作。即使在 Angular 10 中。:(

更新：我确实让它工作了。 （我使用的是 Angular 10.0.1）。我的工作代码看起来与您实现它的方式完全相同。所以升级到 Angular 10 应该可以解决问题。