固定页脚和分页器的角度材料数据表

Question

我将Angular Material Table使用固定的页脚和页眉以及分页器。问题是我如何在页脚中显示行数据的总和。如何计算行数据以显示在页脚中。

`

<ng-container matColumnDef="quantity">
    <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm mat-sort-header>Quantity</mat-header-cell>
    <mat-cell *matCellDef="let purchase" fxHide fxShow.gt-sm>
        <p class="font-weight-600 text-truncate">
            {{purchase.quantity}}
        </p>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef>

    </mat-footer-cell>
</ng-container>

<ng-container matColumnDef="price">
    <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm mat-sort-header>Price</mat-header-cell>
    <mat-cell *matCellDef="let purchase" fxHide fxShow.gt-sm>
        <p class="font-weight-600 text-truncate">
            {{purchase.price}}
        </p>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef>  </mat-footer-cell>
</ng-container>


<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

<mat-row *matRowDef="let purchase; columns: displayedColumns;" class="contact" (click)="editPurchase(purchase)"
    [ngClass]="{'accent-50':checkboxes[purchase._id]}" matRipple [@animate]="{value:'*',params:{y:'100%'}}">
</mat-row>

<mat-footer-row mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></mat-footer-row>

<mat-toolbar>
<mat-toolbar-row>
    <mat-icon (click)="exportCsv(dataSource)" title="Export as CSV">save_alt</mat-icon>

    <mat-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="10"
        [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons>
    </mat-paginator>
</mat-toolbar-row>

`

Answer 1

您可以减少价格范围：

this.total = pricesArray.reduce((priceA, priceB) => {return priceA + priceB})

这将汇总您的所有价格，并为您提供总计