时间戳

首页 > 解决方案 > 带固定页脚和分页器的角度材料数据表

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

问题描述

我使用带有固定页脚和页眉以及分页器的 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>

`

标签： angularangular-material

解决方案

你可以减少你的价格数组：

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

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

推荐阅读