具有多个页脚的 mat-table
Posted
技术标签:
【中文标题】具有多个页脚的 mat-table【英文标题】：mat-table with multiple footers 【发布时间】：2020-01-25 20:23:02 【问题描述】：我想创建以下内容：一个带有一些额外页脚行的表，这些行没有专门绑定到mat-table 的dataSource，而是绑定到组件中的其他一些数据源。
我应该指定我不需要它们是多个页脚（因为我找不到好的方法来实现这一点），但我只需要最后 3 个响应。
我们的数据模型如下所示：
// These contain the info for the last 3 rows (netto bedrag, BTW, Totaalbedrag)
netAmount: number;
vatAmount: number;
totalAmount: number;
lines: // lines is our data source
[
// These are the columns (Omschrijving, Tarief, Aantal, totaal)
description: string;
unitPrice: number;
quantity: number;
total: number;
];
我们的 html 看起来像这样，为了便于阅读，我省略了 CSS，但我确实需要分隔符！
<div class="purchase-invoices__lines">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Omschrijving</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Omschrijving:</span>
<span class="mobile-value"> invoiceLine.description </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef>
<span class="mobile-value net-amount_text ">
Netto Bedrag
</span>
</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tariff">
<mat-header-cell *matHeaderCellDef>Tarief</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Tarief:</span>
<span class="mobile-value"> invoiceLine.unitPrice | currency: 'EUR' </span> </mat-cell
><mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount">
<mat-header-cell *matHeaderCellDef>Aantal</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Aantal:</span>
<span class="mobile-value"> invoiceLine.quantity </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Totaal</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Totaal:</span>
<span class="mobile-value"> invoiceLine.totalPrice | currency: 'EUR' </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef>
<span class="mobile-value"> purchaseInvoice.netAmount | currency: 'EUR' </span>
</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
</mat-table>
</div>
到目前为止，我的结果如下所示：
你们知道我将如何创建我的预期结果吗？正如您在标题中看到的那样，我的第一个想法是有多个页脚，但我不知道这是否可能。我找到了this example，但我无法让它像我的示例中那样工作。
我自己就是一个后端，无法创建一个很好的例子或解释为什么事情不起作用，所以我祈祷你们能神奇地解决我的问题。
非常感谢！
【问题讨论】：
【参考方案1】：我修复它的方式：
在 TS 中：
displayedColumns = ['description', 'tariff', 'amount', 'total'];
displayedVatColumns = ['vatAmountTitle', 'emptyFooter', 'emptyFooter', 'vatAmount'];
displayedTotalColumns = ['totalAmountTitle', 'emptyFooter', 'emptyFooter', 'totalAmount'];
在 HTML 中：
<div class="purchase-invoices__lines">
<mat-table #table [dataSource]="purchaseInvoice.invoiceLines">
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Omschrijving</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Omschrijving:</span>
<span class="mobile-value"> invoiceLine.description </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef class="bold mobile-hide"><span class="mobile-value">Netto Bedrag</span></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tariff">
<mat-header-cell *matHeaderCellDef>Tarief</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Tarief:</span>
<span class="mobile-value"> invoiceLine.unitPrice | currency: 'EUR' </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef class="mobile-hide"></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount">
<mat-header-cell *matHeaderCellDef>Aantal</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Aantal:</span>
<span class="mobile-value"> invoiceLine.quantity </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef class="mobile-hide"></mat-footer-cell>
</ng-container>
<ng-container matColumnDef="total">
<mat-header-cell *matHeaderCellDef>Totaal</mat-header-cell>
<mat-cell *matCellDef="let invoiceLine">
<span class="mobile-label">Totaal:</span>
<span class="mobile-value"> invoiceLine.netPrice | currency: 'EUR' </span>
</mat-cell>
<mat-footer-cell *matFooterCellDef>
<span class="mobile-label bold">Netto Bedrag</span>
<span class="mobile-value bold"> purchaseInvoice.netAmount | currency: 'EUR' </span>
</mat-footer-cell>
</ng-container>
<!-- empty footer row-->
<ng-container matColumnDef="emptyFooter">
<mat-footer-cell *matFooterCellDef class="mobile-hide"></mat-footer-cell>
</ng-container>
<!-- set footer for vat amount-->
<ng-container matColumnDef="vatAmountTitle">
<mat-footer-cell *matFooterCellDef class="mobile-hide">BTW (21%)</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="vatAmount">
<mat-footer-cell *matFooterCellDef>
<span class="mobile-label">BTW (21%)</span>
<span class="mobile-value"> purchaseInvoice.vatAmount | currency: 'EUR' </span>
</mat-footer-cell>
</ng-container>
<!-- set footer for total amount-->
<ng-container matColumnDef="totalAmountTitle">
<mat-footer-cell *matFooterCellDef class="mobile-hide bold">Totaalbedrag</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="totalAmount">
<mat-footer-cell *matFooterCellDef>
<span class="mobile-label bold">Totaalbedrag</span>
<span class="mobile-value bold"> purchaseInvoice.totalAmount | currency: 'EUR' </span>
</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<mat-footer-row *matFooterRowDef="displayedColumns" class="nettoRow"></mat-footer-row>
<mat-footer-row *matFooterRowDef="displayedVatColumns" class="vatRow"></mat-footer-row>
<mat-footer-row *matFooterRowDef="displayedTotalColumns" class="totalRow"></mat-footer-row>
</mat-table>
</div>
我希望这对人们有所帮助！
【讨论】：
【参考方案2】：好的，让我试试这个。我正在寻找一种解决方案，将我的分页器放在表格中，并遇到了您的问题。所以，我不确定这是否是最好的解决方案，但它可以工作。如果您不需要页脚来引用这些列（或者即使您需要多个页脚），您可以为您的页脚添加多个 ng-container。与您可能拥有的示例类似
<ng-container matColumnDef="netto">
<td mat-footer-cell *matFooterCellDef>
Netto Bedrag
</td>
</ng-container>
<ng-container matColumnDef="blankCell">
<td mat-footer-cell *matFooterCellDef>
</td>
</ng-container>
<ng-container matColumnDef="total">
<td mat-footer-cell *matFooterCellDef>
purchaseInvoice.netAmount | currency: 'EUR'
</td>
</ng-container>
然后在底部使用这些新单元格创建一个新的 mat-footer-row。您可以根据需要多次重复使用 blankCell。
<tr mat-footer-row
*matFooterRowDef="['netto', 'blankCell', 'blankCell', 'total']; sticky: true">
</tr>
只需为您需要的每个页脚重复（对您需要的任何空白单元格重复使用 blankCell）。该顺序将基于您的 matColumnDef 名称数组。由于您已经拥有 Netto Bedrag 的，您可以跳过它并用您需要的替换它（BTW 和 Totaalbedrag）。可能有一个更清洁的解决方案，但这至少会让你接近。
【讨论】：
嗨！很抱歉，我忘记将我的问题标记为已回答；我前段时间修好了。很抱歉浪费了您的时间，但我希望它可以在某个时候对其他人有所帮助。我会尽量记住在这里发布我的解决方案:)以上是关于具有多个页脚的 mat-table的主要内容，如果未能解决你的问题，请参考以下文章
无论如何创建一个带有一个通用页脚的 UITableView 吗？
如何将 DiffUtil.Callback 与具有页眉和页脚的 RecyclerView 一起使用？