【发布时间】：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，但我无法让它像我的示例中那样工作。
我自己就是一个后端，无法创建一个很好的例子或解释为什么事情不起作用，所以我祈祷你们能神奇地解决我的问题。
非常感谢！
【问题讨论】：
标签： html angular html-table angular-material