Vyhledávání na webu

typescript - Angular material tabulka součty v patičce

Používám Angular Material Table 8.2.3. Mám spoustu tabulek, které jsou generovány podle definice v TypeScriptu. Většina tabulek se týká čísel, takže musím zobrazovat součty v patičce. Problém je v tom, že příklady materiálových tabulek na stránce Material mají pouze jeden sloupec a nezobrazují, jak pracovat s více sloupci. Hledám způsob, jak dynamicky vypočítat součet sloupce. Mám následující kód, ale nespouští se:

<table mat-table [dataSource]="dataSource" matSort matSortActive="Date" matSortDisableClear="true">

    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</th>
        <td mat-cell *matCellDef="let row">{{ column.cell(row) }}</td>
        <td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

Odpověď č. 1

Nezapisujete správně syntaxi interpolace string.

Váš kód postrádá ukončení }}

Zde je opravená šablona:

<table 
  mat-table 
  [dataSource]="dataSource" 
  matSort 
  matSortActive="Date" 
  matSortDisableClear="true">

  <ng-container 
    *ngFor="let column of columns" 
    [matColumnDef]="column.columnDef">
    <th 
      mat-header-cell 
      *matHeaderCellDef 
      mat-sort-header>
      {{ column.header }}
    </th>
    <td 
      mat-cell 
      *matCellDef="let row">
      {{ column.cell(row) }}
    </td>
    <td 
      mat-footer-cell 
      *matFooterCellDef>
      {{ dataSource.data.reduce((data, val) => data+= val.cell(row), 0) }} 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

A pak budete pravděpodobně muset udělat dataSource veřejným, aby byl přístupný v šabloně.

Ale vzhledem k tomu, že dataSource je pravděpodobně nějaký druh závislosti, kterou máte ve svém komponentu, je lepší mít veřejně vystavenou pouze vlastnost data.

Takže byste mohli chtít vytvořit vlastnost, která vypadá nějak takto:

data = this.dataSource.data.reduce((datum, val) => datum+= val.cell(row), 0);

A pak tam, kde interpolujete výsledek, byste udělali toto:

<td
  mat-footer-cell
  *matFooterCellDef>
  {{ data }} 
</td>

PS - Volání metod v syntaxi datového vázání může stát hodně výkonu, a proto by se s tím mělo zacházet jen ve výjimečných případech.

Odkazujte se na tento vlákno, pokud chcete vědět více o důsledcích volání metod v syntaxi vazby dat:

Výkon Angularu: Událost DOM způsobuje nepotřebné volání funkcí

Odpověď č. 2

Myslím, že ve vašem příkladu jste zapomněli uzavřít {{ v <td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>

Můžete zavolat funkci z šablony a tam vypočítat součet sloupce. Například:

<td mat-footer-cell *matFooterCellDef> {{calculateSum()}} </td>

v souboru .ts:

calculate() {
  // calucating

  return value;
}

Související články