Utilisez angulaire Material pour créer des tableaux statistiques.
Installez Angular Material, l'outil de développement de composants (CDK) et la bibliothèque d'animation angulaire, et exécutez le schéma de code
pour ajouter un schéma de table @angular/material
pour créer un composant capable de restituer un matériau angulaire triable prédéfini. sources de données paginables. [Recommandation de didacticiel associée : "tutoriel angulaire"]
ng génère @angular/material:table texe1
puis modifie-le en fonction de cela.
Le fichier html du composant
<div class="mat-elevation-z8">
<table mat-table class="full-width-table" matSort aria-label="Elements">
<!-- Colonne Id -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>numéro de série</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-conteneur>
<!-- Colonne Nom -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> nom de la roche et du sol</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-conteneur>
<!-- num1 Colonne -->
<ng-container matColumnDef="num1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> quantité attendue</th>
<td mat-cell *matCellDef="let row">{{row.num1}}</td>
</ng-conteneur>
<!-- colonne num2 -->
<ng-container matColumnDef="num2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> numéro actuel</th>
<td mat-cell *matCellDef="let row">{{row.num2}}</td>
</ng-conteneur>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="laisser la ligne ; colonnes : displayColumns;"></tr>
</table>
<!-- Contrôler la longueur d'affichage des données du tableau-->
<mat-paginator #paginator
[longueur]="dataSource?.data?.length"
[indexpage]="0"
[Taille de la page]="10"
[pageSizeOptions]="[5, 10, 17]"
aria-label="Sélectionner la page">
</mat-paginateur>
</div> Le fichier texe1-datasource.ts du composant
importe { DataSource } depuis '@angular/cdk/collections' ;
importer { MatPaginator } depuis '@angular/material/paginator' ;
importer { MatSort } depuis '@angular/material/sort' ;
importer { map } depuis 'rxjs/operators' ;
import { Observable, ou as observableOf, merge } from 'rxjs' ;
// TODO : Remplacez ceci par votre propre type de modèle de données
interface d'exportation Texe1Item {
nom : chaîne ;
identifiant : numéro ;
num1 : numéro ;
num2 : numéro ;
}
// TODO : remplacez ceci par des données réelles de votre application
const EXAMPLE_DATA : Texe1Item[] = [
{id : 1, nom : 'argile limoneuse', num1:1000, num2:100,},
{id : 2, nom : 'argile limoneuse limoneuse', num1:1000, num2:100,},
{id : 3, nom : 'Argile', num1:1000, num2:100,},
{id : 4, nom : 'Limon argileux', num1:1000, num2:100,},
{id : 5, nom : 'argile limoneuse', num1:1000, num2:100,},
{id : 6, nom : 'Breccia (brèche)', num1:1000, num2:100,},
{id : 7, nom : '中沙', num1:1000, num2:1000,},
{id : 8, nom : 'Sol organique', num1:1000, num2:100,},
{id : 9, nom : 'Sol de tourbe A', num1:1000, num2:100,},
{id : 10, nom : 'Sol de tourbe B', num1:1000, num2:100,},
{id : 11, nom : 'Limon sablonneux', num1:1000, num2:100,},
{id : 12, nom : 'sable limoneux', num1:1000, num2:100,},
{id : 13, nom : 'sable fin', num1:1000, num2:100,},
{id : 14, nom : 'sable grossier', num1:1000, num2:100,},
{id : 15, nom : 'Gravel', num1:1000, num2:100,},
{id : 16, nom : 'Caillou (gravier)', num1:1000, num2:100,},
{id : 17, nom : 'Boulder (boulder)', num1:1000, num2:100,},
];
/**
* Source de données pour la vue Texe1.
* encapsuler toute la logique pour récupérer et manipuler les données affichées
* (y compris le tri, la pagination et le filtrage).
*/
classe d'exportation Texe1DataSource extends DataSource<Texe1Item> {
données : Texe1Item[] = EXAMPLE_DATA ;
paginateur : MatPaginator | non défini ;
trier : MatSort | non défini ;
constructeur() {
super();
}
/**
* Connectez cette source de données à la table. La table ne sera mise à jour que lorsque.
* le flux renvoyé émet de nouveaux éléments.
* @returns Un flux des éléments à restituer.
*/
connect() : Observable<Texe1Item[]> {
if (this.paginator && this.sort) {
// Combine tout ce qui affecte les données rendues en une seule mise à jour
// flux pour la table de données à consommer.
return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
.pipe(carte(() => {
return this.getPagedData(this.getSortedData([...this.data ]));
}));
} autre {
throw Error('Veuillez définir le paginateur et trier la source de données avant de vous connecter.');
}
}
/**
* Appelé lorsque la table est détruite. Utilisez cette fonction pour nettoyer.
* toutes les connexions ouvertes ou libérer toutes les ressources détenues qui ont été configurées lors de la connexion.
*/
déconnecter() : void {}
/**
* Paginez les données (côté client). Si vous utilisez la pagination côté serveur,
* cela serait remplacé en demandant les données appropriées au serveur.
*/
private getPagedData (données : Texe1Item[]) : Texe1Item[] {
si (this.paginator) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.splice(startIndex, this.paginator.pageSize);
} autre {
renvoyer des données ;
}
}
/**
* Triez les données (côté client). Si vous utilisez le tri côté serveur,
* cela serait remplacé en demandant les données appropriées au serveur.
*/
private getSortedData(données : Texe1Item[]): Texe1Item[] {
if (!this.sort || !this.sort.active || this.sort.direction === '') {
renvoyer des données ;
}
return data.sort((a, b) => {
const isAsc = this.sort?.direction === 'asc';
commutateur (this.sort?.active) {
case 'nom' : return compare(a.name, b.name, isAsc);
case 'id' : return compare(+a.id, +b.id, isAsc);
par défaut : renvoie 0 ;
}
});
}
}
/** Comparateur de tri simple, par exemple les colonnes ID/Nom (pour le tri côté client */).
function comparer (a : chaîne | nombre, b : chaîne | nombre, isAsc : booléen) : nombre {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
} Importation du fichier texe1.component.ts du composant
{ AfterViewInit, Component, ViewChild } depuis '@angular/core';
importer { MatPaginator } depuis '@angular/material/paginator' ;
importer { MatSort } depuis '@angular/material/sort' ;
importer { MatTable } depuis '@angular/material/table' ;
importer { Texe1DataSource, Texe1Item } depuis './texe1-datasource' ;
@Composant({
sélecteur : 'app-texe1',
URL du modèle : './texe1.component.html',
styleUrls : ['./texe1.component.css']
})
la classe d'exportation Texe1Component implémente AfterViewInit {
Paginateur @ViewChild(MatPaginator) ! : MatPaginator ;
@ViewChild(MatSort) trier ! : MatSort;
@ViewChild(MatTable) table!: MatTable<Texe1Item>;
Source de données : Texe1DataSource ;
/** Les colonnes affichées dans le tableau peuvent être ajoutées, supprimées ou réorganisées */.
displayColumns = ['id', 'name','num1','num2'];
constructeur() {
this.dataSource = new Texe1DataSource();
}
ngAfterViewInit() : vide {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
} Enfin, il est affiché dans le fichier app.component.html.
<app-texe1></app-texe1>
Rendu : 