带有多个页脚的垫表 [英] 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-h​​eader-cell *matHeaderCellDef>Omschrijving</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Tarief</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Aantal</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Totaal</mat-h​​eader-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-h​​eader-row *matHeaderRowDef=displayedColumns"></mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Omschrijving</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Tarief</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Aantal</mat-h​​eader-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-h​​eader-cell *matHeaderCellDef>Totaal</mat-h​​eader-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-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-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屋！