带有多个页脚的垫表

Question

我想创建以下内容：一个带有一些额外页脚行的表，这些行没有专门绑定到dataSource的mat-table，而是绑定到组件中的其他一些数据源。我应该指定我不要求它们是多个页脚（因为我找不到实现此目的的好方法），但我只需要最后 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>

到目前为止，我的结果是这样的：

你们知道我将如何创建我的预期结果吗？正如您在标题中看到的那样，我的第一个想法是有多个页脚，但我不知道这是否可行。我找到了这个例子，但我不能让它像我的例子一样工作。

我自己是一个后端，无法创建一个很好的例子或解释为什么事情不起作用，所以我祈祷你们能神奇地解决我的问题。

非常感谢！

Answer 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>

我希望这可以帮助人们！