带有多个页脚的垫表 [英] mat-table with multiple footers
问题描述
我想创建以下内容:一个包含一些额外页脚行的表,这些行没有专门绑定到 mat-table
的 dataSource
,而是绑定到其他一些也在组件中的数据源.我应该指定我不要求它们是多个页脚(因为我找不到实现此目的的好方法),但我只需要最后 3 个页脚即可响应.
我们的数据模型如下所示:
<代码>{//这些包含最后 3 行的信息(netto bedrag、BTW、Totaalbedrag)净额:数量;增值税金额:数量;totalAmount:数量;行://行是我们的数据源[{//这些是列(Omschrijving、Tarief、Aantal、totaal)描述:字符串;单价:数量;数量:数量;总数;}];}
我们的 HTML 看起来像这样,为了可读性我省略了 CSS,但我确实需要分隔符!
<mat-table #table [dataSource]=dataSource"><ng-container matColumnDef=描述"><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 ">内托床单</span></mat-footer-cell></ng-容器><ng-container matColumnDef=关税"><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 |货币:'欧元'}}</span></mat-cell><mat-footer-cell *matFooterCellDef></mat-footer-cell></ng-容器><ng-container matColumnDef=数量"><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-容器><ng-container matColumnDef=total"><mat-header-cell *matHeaderCellDef>Totaal</mat-header-cell><mat-cell *matCellDef="let invoiceLine"><span class="mobile-label">总计:</span><span class="mobile-value">{{ invoiceLine.totalPrice |货币:'欧元'}}</span></mat-cell><mat-footer-cell *matFooterCellDef><span class="mobile-value">{{ purchaseInvoice.netAmount |货币:'欧元'}} </span></mat-footer-cell></ng-容器><mat-header-row *matHeaderRowDef=displayedColumns"></mat-header-row><mat-row *matRowDef="let row;列:displayedColumns"></mat-row><mat-footer-row *matFooterRowDef=displayedColumns"></mat-footer-row></mat-table>
到目前为止我的结果是这样的:
你们知道我将如何创建我的预期结果吗?正如您在标题中看到的那样,我的第一个想法是有多个页脚,但我不知道这是否可能.我找到了 这个例子,但我无法让它像我的例子一样工作.
我自己就是一个后端,无法创建一个很好的例子或解释为什么事情不起作用,所以我祈祷你们能神奇地解决我的问题.
非常感谢!
我修复它的方式:
在 TS 中:
displayedColumns = ['description', 'tariff', 'amount', 'total'];displayVatColumns = ['vatAmountTitle', 'emptyFooter', 'emptyFooter', 'vatAmount'];displayTotalColumns = ['totalAmountTitle', 'emptyFooter', 'emptyFooter', 'totalAmount'];
在 HTML 中:
<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-容器><ng-container matColumnDef="关税"><mat-header-cell *matHeaderCellDef>Tarief</mat-header-cell><mat-cell *matCellDef="let invoiceLine"><span class="mobile-label">费用:</span><span class="mobile-value">{{ invoiceLine.unitPrice |货币:'欧元'}}</span></mat-cell><mat-footer-cell *matFooterCellDef class="mobile-hide"></mat-footer-cell></ng-容器><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-容器><ng-container matColumnDef="total"><mat-header-cell *matHeaderCellDef>Totaal</mat-header-cell><mat-cell *matCellDef="let invoiceLine"><span class="mobile-label">总计:</span><span class="mobile-value">{{ invoiceLine.netPrice |货币:'欧元'}}</span></mat-cell><mat-footer-cell *matFooterCellDef><span class="mobile-label bold">Netto Bedrag</span><span class="mobile-value bold">{{ purchaseInvoice.netAmount |货币:'欧元'}}</span></mat-footer-cell></ng-容器><!-- 空页脚行--><ng-container matColumnDef="emptyFooter"><mat-footer-cell *matFooterCellDef class="mobile-hide"></mat-footer-cell></ng-容器><!-- 为增值税金额设置页脚--><ng-container matColumnDef="vatAmountTitle"><mat-footer-cell *matFooterCellDef class="mobile-hide">顺便说一句 (21%)</mat-footer-cell></ng-容器><ng-container matColumnDef="vatAmount"><mat-footer-cell *matFooterCellDef><span class="mobile-label">顺便说一句 (21%)</span><span class="mobile-value">{{ purchaseInvoice.vatAmount |货币:'欧元'}}</span></mat-footer-cell></ng-容器><!-- 设置总金额的页脚--><ng-container matColumnDef="totalAmountTitle"><mat-footer-cell *matFooterCellDef class="mobile-hide bold">Totaalbedrag</mat-footer-cell></ng-容器><ng-container matColumnDef="totalAmount"><mat-footer-cell *matFooterCellDef><span class="mobile-label bold">Totaalbedrag</span><span class="mobile-value bold">{{ purchaseInvoice.totalAmount |货币:'欧元'}}</span></mat-footer-cell></ng-容器><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>
我希望这对人们有所帮助!
I would like to create the following: a table with some extra footer rows that are not tied specifically to the dataSource
of the mat-table
, but to some other dataSource that is also in the component.
I should specify I do not require them to be multiple footers ( as I can't find good ways for this to be possible), but I just need these last 3 to be responsive.
Our data model looks like this:
{
// 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;
}
];
}
Our HTML looks like this, I have omitted CSS for readability but I do require the dividers!
<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>
My result so far looks like this:
Do you guys know how I would create my expected result? As you can read in the title, my first thought was to have multiple footers but I do not know if this is possible. I have found this example but I can't get it to work like in my example.
I am a back-ender myself and can't create a great example or explain why things do not work, so I pray you guys can magically solve my issue.
Thank you so much!
The way I fixed it:
In the TS:
displayedColumns = ['description', 'tariff', 'amount', 'total'];
displayedVatColumns = ['vatAmountTitle', 'emptyFooter', 'emptyFooter', 'vatAmount'];
displayedTotalColumns = ['totalAmountTitle', 'emptyFooter', 'emptyFooter', 'totalAmount'];
In the 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>
I hope this helps people!
这篇关于带有多个页脚的垫表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!