nettuts.hu

Hogyan készíts egy Angular Material táblázatot?

Ha jól értesz egy keretrendszerhez, az nagyon fel tudja gyorsítani a munkádat.
Az Angular Material is ilyen, de mint a többi ez is eléggé bonyolult tud lenni első látásra. Most abban segítek neked, hogy hozz létre profi módon és gyorsan egy táblázatot Material -ban.

Nézd meg a videót

Github Repo

https://github.com/cherryApp/ast-mat-table

Szöveges segítség

Haladj a videó alapján.
Bocs, poén volt.
A videó első része a Material gyári leírását követi. Utána jön a custom okosság, hogy nem írom le annyiszor az oszlopdefiníciót, ahány oszlop van, hanem szépen ngFor -al generálom ki őket.

A dinamikus oszlopok

Olyan a legritkább esetben lesz, hogy beállítod egy táblázat oszlopait és azon soha többé nem kell változtatni. Ezért praktikus, ha a beállításokat egy tömbben veszed fel és az alapján rendereled le az oszlopokat.
Ehhez csak három dologra lesz szükséged:

1. Egy tömb az oszlopoknak

Ebben a tömbben csak fel kell venni, hogy milyen oszlopaid lesznek:

displayedColumns: string[] = [
    'id',
    'first_name',
    'last_name',
    'gender',
    'email',
    'address'
  ];

2. Oszlopok generálása

Ezután csak be kell járni ngFor segítségével az oszlopok tömbjét:

<ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
    <th mat-header-cell *matHeaderCellDef> {{ col | titlecase }} </th>
    <td mat-cell *matCellDef="let user"> {{user[col]}} </td>
</ng-container>

3. Sorok beállítása

A sorokhoz nem is kell ciklus, csak szintén meg kell adnod a tömböt:

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

A teljes html

<table mat-table [dataSource]="dataSource$ | async" class="mat-elevation-z8">

  <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
    <th mat-header-cell *matHeaderCellDef> {{ col | titlecase }} </th>
    <td mat-cell *matCellDef="let user"> {{user[col]}} </td>
  </ng-container>

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

</table>

ANGULAR-MATERIAL-TABLAZAT-DINAMIKUS-OSZLOPOKKAL