Question

<mat-table>
    <ng-container matColumnDef="ytdBurnt">
        <mat-header-cell *matHeaderCellDef style="font-size: 65%" class="white-text" fxHide [fxShow.gt-md]="true"> Ytd Burnt </mat-header-cell>
        <mat-cell *matCellDef="let element" style="font-size: 65%"> <span> {{ element.ytdBurnt }}</span> </mat-cell>
    </ng-container>
    <!-- column based filter -->
    <ng-container *matHeaderRowDef="displayedColumns">
        <mat-header-row class="blue-back"></mat-header-row>
    </ng-container>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSize]="25" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

我想在上面的mat表中添加页脚。我试图添加 <td mat-footer-cell *matFooterCellDef> Total </td> 连同

<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

但这不起作用。

Answer 1

在每个单元格中添加mat-footer-cell组件

const find = (haystack, search) => {
      search = search.toLowerCase().split(/\s/)
      haystack = haystack.toLowerCase().split(/\s/)

      return search.some(searchTerm => {
        return haystack.some(haystackTerm => {
          return haystackTerm.startsWith(searchTerm)
        })
      })
    }

并且在关闭mat-table之前添加

<ng-container matColumnDef="item">
    <mat-header-cell *matHeaderCellDef style="font-size: 65%" > Ytd Burnt </mat-header-cell>
    <mat-cell *matCellDef="let element" style="font-size: 65%"> <span> {{ element.item }}</span> 
    </mat-cell>
    <mat-footer-cell *matFooterCellDef> Total </mat-footer-cell>
</ng-container>

Angular 4将页脚添加到Mat数据表

1 个答案: