циновка с несколькими нижними колонтитулами - PullRequest
Новая
       64

циновка с несколькими нижними колонтитулами

0 голосов
/ 25 сентября 2019

Я хотел бы создать следующее: таблицу с некоторыми дополнительными строками нижнего колонтитула, которые не привязаны конкретно к dataSource mat-table, но к некоторому другому источнику данных, который также находится в компоненте.Я должен указать, что я не требую, чтобы они были несколькими нижними колонтитулами (поскольку я не могу найти хорошие способы, чтобы это было возможно), но мне просто нужно, чтобы последние 3 были отзывчивыми.

expected result image

Наша модель данных выглядит следующим образом: 

{
   // 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>

Пока мой результат выглядит так:

current result

Ребята, вы знаете, как я могу получить ожидаемый результат?Как вы можете прочитать из названия, моей первой мыслью было иметь несколько нижних колонтитулов, но я не знаю, возможно ли это.Я нашел этот пример , но я не могу заставить его работать как в моем примере.

Я сам отступник и не могу создать отличный пример или объяснить, почему что-то не работает, поэтому я прошу вас, ребята, волшебным образом решить мою проблему.

Большое вам спасибо!

...