Tentei seguir este exemplo : https://stackblitz.com/angular/xlepqgxbger?file=src%2Fapp%2Ftable-http-example.ts mas não consegui fazer funcionar a paginação com o <mat-paginator>.
Segue meu código
html
<mat-card> <form [formGroup]="grupoPesquisarFormGroup"> <mat-card-content> <mat-card-title>Pesquisar {{label}}</mat-card-title> </mat-card-content> <mat-card-content> <button mat-mini-fab type="button" matTooltip="Pesquisar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="pesquisar(true)"> <mat-icon>search</mat-icon> </button> <button mat-mini-fab type="button" matTooltip="Novo Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="novo()"> <mat-icon>add_circle_outline</mat-icon> </button> <button mat-mini-fab type="button" matTooltip="Limpar {{label}}" mat-fab color="primary" mat-card-icon class="shadow-one" (click)="limparPesquisarIncluir(grupoPesquisarFormGroup)"> <mat-icon>clear_all</mat-icon> </button> <button mat-mini-fab type="button" matTooltip="Alterar Registro de {{label}}" mat-fab color="primary" mat-card-icon class="shadow-none" (click)="alterar()"> <mat-icon>create</mat-icon> </button> <button mat-mini-fab type="button" matTooltip="Excluir Registro de {{label}}" mat-fab color="warn" mat-card-icon class="shadow-none" (click)="excluir()"> <mat-icon>delete</mat-icon> </button> </mat-card-content> <mat-card-content> <mat-form-field class="formulario-campo-width"> <input matInput placeholder="Nome do grupo" id="nome" formControlName="nome" name="nome" maxlength="255" /> </mat-form-field> <br> <mat-form-field class="formulario-campo-width"> <input matInput placeholder="Role" id="role" formControlName="role" name="role" maxlength="255" /> </mat-form-field> <br> <mat-form-field class="formulario-campo-width"> <mat-select placeholder="Status do registro" name="statusDoRegistro" formControlName="statusDoRegistro" id="statusDoRegistro"> <mat-option>Nenhum</mat-option> <mat-option *ngFor="let status of statusRegistros" [value]="status.key">{{status.texto}} </mat-option> </mat-select> </mat-form-field> </mat-card-content> </form> </mat-card> <div [hidden]="!mostrarPesquisa"> <mat-card> <mat-card-content> <mat-card-title>Resultado de {{label}}</mat-card-title> </mat-card-content> <div class="example-table-container"> <table mat-table [dataSource]="entidadePesquisa" class="example-table" matSort matSortActive="created" matSortDisableClear matSortDirection="desc"> <ng-container matColumnDef="select"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let element"> <mat-radio-button value="element" (click)="preencherId(element.id)"></mat-radio-button> </td> </ng-container> <ng-container matColumnDef="nome"> <th mat-header-cell *matHeaderCellDef> Nome do grupo </th> <td mat-cell *matCellDef="let element"> {{element.nome}} </td> </ng-container> <ng-container matColumnDef="role"> <th mat-header-cell *matHeaderCellDef> Role </th> <td mat-cell *matCellDef="let element"> {{element.role}} </td> </ng-container> <ng-container matColumnDef="statusDoRegistro"> <th mat-header-cell *matHeaderCellDef> Status do registro </th> <td mat-cell *matCellDef="let element"> {{element.statusDoRegistro}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns" class="example-first-header-row"> </tr> <tr mat-header-row class="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator #paginator [pageIndex]="0" [length]="resultsLength" [pageSize]="100" [pageSizeOptions]="[10, 50, 100, 300]" [showFirstLastButtons]="true"> </mat-paginator> </div> </mat-card> </div>
Código ts
private pesquisarComModelo(mostrarMensagem: boolean, modelo: any) {
/*this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);*/
merge(this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.servico.pesquisar(modelo);
}
),
map((data: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.page.totalElementos;
return data.lista;
}
),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
}
)
).subscribe(
(data: any) => {
this.entidadePesquisa = data;
this.mostrarPesquisa = true;
}
);
}
Ele faz a busca perfeitmente no banco de dados, mas não habilita os botões de paginação, conforme imagem em anexo: Mostra que tem dois registros, o que é verdade.
Cadastrei mais um, fiz a pesquisa e mostrou que tem 3 registros, conforme imagem
O que pode estar de errado ?