html
<table
mat-table
[dataSource]="lista"
class="w-100"
matSort
matSortActive="nome"
matSortDisableClear
matSortDirection="desc"
>
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Nome
</th>
<td mat-cell *matCellDef="let element">{{ element.nome }}</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
E-mail
</th>
<td mat-cell *matCellDef="let element">{{ element.email }}</td>
</ng-container>
<ng-container matColumnDef="tipoUsuario" mat-sort-header>
<th mat-header-cell *matHeaderCellDef>
Tipo de usuário
</th>
<td mat-cell *matCellDef="let element">{{ element.tipoUsuarioDescricao }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator
#paginator
[length]="resultsLength"
[pageIndex]="0"
[pageSize]="15"
[pageSizeOptions]="[5, 15, 25, 50, 75, 100, 500]"
(page)="paginacao($event)"
>
</mat-paginator>
ts
import { Component, OnInit, ViewChild } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { merge, of as observableOf } from "rxjs";
import { catchError, map, startWith, switchMap } from "rxjs/operators";
import { NUMERO_INICIAL_PESQUISA } from "src/app/core/api/api";
import { ErrorService } from "src/app/core/service/error.service";
import { environment } from "src/environments/environment";
import { PesquisaService } from "../../../../app/core/service/pesquisa.service";
@Component({
selector: "app-usuario-pesquisa",
templateUrl: "./usuario-pesquisa.component.html",
})
export class UsuarioPesquisaComponent implements OnInit {
breadscrums = [
{
title: "Home",
active: "Usuários",
},
];
displayedColumns: string[] = ["nome", "email", "tipoUsuario"];
lista = [];
mostrarPesquisa: boolean;
resultsLength: number;
isLoadingResults: boolean;
isRateLimitReached: boolean;
pesquisarForm = new FormGroup({});
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
dataSource: MatTableDataSource<any> = new MatTableDataSource();
pesquisa: any;
constructor(
private pesquisaService: PesquisaService,
private errorService: ErrorService
) {}
ngOnInit() {
this.mostrarPesquisa = false;
this.resultsLength = 0;
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.buscar();
}
paginacao(event?: PageEvent): void {
this.buscar(event?.pageIndex, event?.pageSize);
}
buscar(index = 0, length = NUMERO_INICIAL_PESQUISA): void {
this.mostrarPesquisa = false;
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
this.pesquisa = {
paginaAtual: index,
quantidadeRegistros: length,
};
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.pesquisa.direcao = this.sort.direction;
this.pesquisa.campo = this.sort.active;
return this.pesquisaService.pesquisar(
this.pesquisa,
"usuario",
environment.USU
);
}),
map((data: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.body.paginacao.totalElementos;
return data.body.lista;
}),
catchError((error: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
if (error !== "undefined") {
if (error.error !== null && error.error.texto !== undefined) {
this.errorService.error(error);
} else {
this.errorService.error("Erro em pesquisar um registro !");
}
}
return observableOf([]);
})
)
.subscribe((data: any) => {
this.dataSource = data;
this.mostrarPesquisa = true;
});
}
}
Só que o this sort está undefined, e assim não passa.