Mat-paginator buscando informações no servidor

[guilhermecostalopes]

Tentei seguir este exemplo : https://run.stackblitz.com/api/angular/v1?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>&nbsp;
      <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>&nbsp;
      <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>&nbsp;
      <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>&nbsp;
      <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 ?