Use material angular para criar tabelas estatísticas.
Instale o Angular Material, a ferramenta de desenvolvimento de componentes (CDK) e a biblioteca de animação Angular e execute o esquema de código
para adicionar o esquema de tabela @angular/material
para criar um componente que pode renderizar um material angular predefinido e classificável para. fontes de dados pagináveis. [Recomendação do tutorial relacionado: "tutorial angular"]
gere @angular/material:table texe1
e modifique-o com base nisso.
O arquivo html do componente
<div class="mat-elevation-z8">
<tabela mat-table class="full-width-table" matSort aria-label="Elementos">
<!-- Coluna de ID -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>número de série</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- Coluna Nome -->
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef mat-sort-header> nome da rocha e do solo</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<!-- Coluna num1 -->
<ng-container matColumnDef="num1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> quantidade esperada</th>
<td mat-cell *matCellDef="let row">{{row.num1}}</td>
</ng-container>
<!-- Coluna num2 -->
<ng-container matColumnDef="num2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> número atual</th>
<td mat-cell *matCellDef="let row">{{row.num2}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; colunas: displayColumns;"></tr>
</tabela>
<!-- Controlar o comprimento de exibição dos dados da tabela-->
<mat-paginador #paginador
[comprimento]="fonte de dados?.dados?.comprimento"
[pageIndex]="0"
[tamanho da página]="10"
[pageSizeOptions]="[5, 10, 17]"
aria-label="Selecionar página">
</mat-paginator>
</div> O arquivo texe1-datasource.ts do componente
importa { DataSource } de '@angular/cdk/collections';
importar { MatPaginator } de '@angular/material/paginator';
importar { MatSort } de '@angular/material/sort';
importar {mapa} de 'rxjs/operadores';
importar {Observável, de como observableOf, mesclar} de 'rxjs';
// TODO: Substitua isto pelo seu próprio tipo de modelo de dados
interface de exportação Texe1Item {
nome: sequência;
identificação: número;
num1: número;
num2: número;
}
// TODO: substitua isso por dados reais da sua aplicação
const EXAMPLE_DATA: Texe1Item[] = [
{id: 1, nome: 'argila siltosa', num1:1000, num2:100,},
{id: 2, nome: 'argila siltosa', num1:1000, num2:100,},
{id: 3, nome: 'Clay', num1:1000, num2:100,},
{id: 4, nome: 'Lodo argiloso', num1:1000, num2:100,},
{id: 5, nome: 'argila siltosa', num1:1000, num2:100,},
{id: 6, nome: 'Brécia (brecha)', num1:1000, num2:100,},
{id: 7, nome: '中沙', num1:1000, num2:1000,},
{id: 8, nome: 'Solo orgânico', num1:1000, num2:100,},
{id: 9, nome: 'Solo de turfa A', num1:1000, num2:100,},
{id: 10, nome: 'Solo de turfa B', num1:1000, num2:100,},
{id: 11, nome: 'Silte arenoso', num1:1000, num2:100,},
{id: 12, nome: 'areia de silte', num1:1000, num2:100,},
{id: 13, nome: 'areia fina', num1:1000, num2:100,},
{id: 14, nome: 'areia grossa', num1:1000, num2:100,},
{id: 15, nome: 'Gravel', num1:1000, num2:100,},
{id: 16, nome: 'Seixo (cascalho)', num1:1000, num2:100,},
{id: 17, nome: 'Pedregulho (pedregulho)', num1:1000, num2:100,},
];
/**
* Fonte de dados para a visualização Texe1 Esta classe deve.
* encapsular toda a lógica para buscar e manipular os dados exibidos
* (incluindo classificação, paginação e filtragem).
*/
classe de exportação Texe1DataSource estende DataSource<Texe1Item> {
dados: Texe1Item[] = EXAMPLE_DATA;
paginador: MatPaginator | indefinido;
ordenar: MatSort | indefinido;
construtor() {
super();
}
/**
* Conecte esta fonte de dados à tabela A tabela só será atualizada quando.
* o fluxo retornado emite novos itens.
* @returns Um fluxo dos itens a serem renderizados.
*/
conectar(): Observable<Texe1Item[]> {
if (este.paginador && este.sort) {
// Combine tudo que afeta os dados renderizados em uma atualização
// stream para a tabela de dados consumir.
retornar mesclagem (observávelOf (this.data), this.paginator.page, this.sort.sortChange)
.pipe(mapa(() => {
retornar this.getPagedData(this.getSortedData([...this.data ]));
}));
} outro {
throw Error('Por favor, defina o paginador e classifique a fonte de dados antes de conectar.');
}
}
/**
* Chamado quando a tabela está sendo destruída Use esta função para limpar.
* quaisquer conexões abertas ou liberar quaisquer recursos retidos que foram configurados durante a conexão.
*/
desconectar(): void {}
/**
* Paginar os dados (lado do cliente). Se você estiver usando paginação do lado do servidor,
* isso seria substituído pela solicitação dos dados apropriados ao servidor.
*/
private getPagedData(dados: Texe1Item[]): Texe1Item[] {
if (este.paginador) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
retornar dados.splice(startIndex, this.paginator.pageSize);
} outro {
retornar dados;
}
}
/**
* Classifique os dados (do lado do cliente). Se você estiver usando a classificação do lado do servidor,
* isso seria substituído pela solicitação dos dados apropriados ao servidor.
*/
private getSortedData(dados: Texe1Item[]): Texe1Item[] {
if (!this.sort || !this.sort.active || this.sort.direction === '') {
retornar dados;
}
retornar dados.sort((a, b) => {
const isAsc = this.sort?.direction === 'asc';
switch (this.sort?.ativo) {
case 'nome': return compare(a.name, b.name, isAsc);
caso 'id': retornar comparar(+a.id, +b.id, isAsc);
padrão: retorno 0;
}
});
}
}
/** Comparador de classificação simples, por exemplo, colunas de ID/Nome (para classificação do lado do cliente */).
função comparar (a: string | número, b: string | número, isAsc: booleano): número {
retornar (a < b ? -1 : 1) * (isAsc ? 1 : -1);
} O arquivo texe1.component.ts do componente
import { AfterViewInit, Component, ViewChild } from '@angular/core';
importar { MatPaginator } de '@angular/material/paginator';
importar { MatSort } de '@angular/material/sort';
importar { MatTable } de '@angular/material/table';
importar { Texe1DataSource, Texe1Item } de './texe1-datasource';
@Componente({
seletor: 'app-texe1',
templateUrl: './texe1.component.html',
styleUrls: ['./texe1.component.css']
})
classe de exportação Texe1Component implementa AfterViewInit {
@ViewChild(MatPaginator) paginador!: MatPaginator;
@ViewChild(MatSort) classificação!: MatSort;
Tabela @ViewChild(MatTable)!: MatTable<Texe1Item>;
fonte de dados: Texe1DataSource;
/** As colunas exibidas na tabela podem ser adicionadas, removidas ou reordenadas */.
colunas exibidas = ['id', 'nome','num1','num2'];
construtor() {
this.dataSource = new Texe1DataSource();
}
ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
esta.tabela.dataSource = esta.dataSource;
}
} Finalmente, ele é exibido no arquivo app.component.html.
<app-texe1></app-texe1>
Renderização: 