我目前正在开发一个 crud 应用程序的前端部分。我在实现惰性分页时收到此错误

Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

我已经研究过许多有相同错误的问题，但没有找到任何解决方案

Obs：已经尝试使用管道 | keyvalue ，没有工作

这是我传递给分页的 对象 的一部分= cidades:

[
    {
        "id": 6,
        "nome": "Florianópolis",
        "qtdHabitantes": null,
        "estado": "SC"
    },
    ...
]

这是我执行请求的 服务 ：

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Pageable } from '../pageable';
import { RequestUtil } from '../request-util';
import { Cidade } from './cidade';
import { CidadeFiltro } from './cidadeFiltro';

@Injectable({
  providedIn: 'root'
})
export class CidadeService {

  apiUrl = environment.apiUrl;
  cidadesUrl = environment.slashApi + '/cidades';

  constructor(private http: HttpClient) { }

  listar(filtro: CidadeFiltro, pageable: Pageable): Observable<any>{
    const options = RequestUtil.buildOptions(Object.assign(filtro, pageable));
    return this.http.get<any>(`${this.cidadesUrl}`, options);
  }
  ...

我的component.ts：

export class CidadesComponent implements OnInit, OnChanges {

  @ViewChild('grid') grid: any;

  cidades: any[] = [];

  estado = new Estado();

  estados = [];

  estadoSelected:any = '';

  filtro = new CidadeFiltro();
  pageable = new Pageable();

  totalRegistros = 0;

  @BlockUI('lista-cidades') blockUI!: NgBlockUI;

  constructor(private cidadeService:CidadeService, private messageService: MessageService ) { }

  ngOnChanges(changes: SimpleChanges): void {
    this.cidades = this.cidades
  }

  ngOnInit() {
    this.listar();
    this.estados = this.estado.estados;
  }

  listar(pagina:number = 0){
    this.blockUI.start();
    this.filtro.estado = this.estadoSelected.name;
    this.pageable.page = pagina;
    this.cidadeService.listar(this.filtro, this.pageable).pipe(finalize(() => this.blockUI.stop())).subscribe(data => {
      this.totalRegistros = data.totalElements;
      this.cidades = data.content;
    }),
    retry(3),
    catchError(error => {
      console.log('Não foi possível listar as cidades');
      return of(0);
    });
  }

最后是我的 component.html

<div *blockUI="'lista-cidades'">
  <p-table [value]="cidades" #grid
    [lazy]="true" [totalRecords]="registros" (onLazyLoad)="aoMudarPagina($event)"
  [paginator]="true" [rows]="size" responsiveLayout="scroll">

    <ng-template pTemplate="emptymessage">
      <tr><td>Nenhuma cidade encontrada</td></tr>
    </ng-template>

    <ng-template pTemplate="header">
        <tr>
            <th>Nome</th>
            <th>Habitantes</th>
            <th>Estado</th>
            <th>Ações</th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-cidade>
        <tr>
            <td>{{cidade.nome}}</td>
            <td>{{cidade.qtdHabitantes | number}}</td>
            <td>{{cidade.estado}}</td>
            <td class="acoes">
              <button pButton icon="pi pi-pencil" pTooltip="Editar" tooltipPosition="top" [routerLink]="['/cidades', cidade.id]"></button>
              <button pButton class="p-button-danger" icon="pi pi-trash"  pTooltip="Excluir" tooltipPosition="top"
              (click)="deletar(cidade)"></button>
            </td>
        </tr>
    </ng-template>
  </p-table>
</div>

错误日志：

ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
    at DefaultIterableDiffer.diff (core.mjs:27502)
    at NgForOf.ngDoCheck (common.mjs:3170)
    at callHook (core.mjs:2552)
    at callHooks (core.mjs:2511)
    at executeCheckHooks (core.mjs:2443)
    at refreshView (core.mjs:9493)
    at refreshEmbeddedViews (core.mjs:10609)
    at refreshView (core.mjs:9508)
    at refreshComponent (core.mjs:10655)
    at refreshChildComponents (core.mjs:9280)

有人能帮我吗？

更新 我曾考虑在 listar() 方法中实现此代码：

listar(pagina:number = 0){
    this.blockUI.start();
    this.filtro.estado = this.estadoSelected.name;
    this.pageable.page = pagina;
    this.cidadeService.listar(this.filtro, this.pageable).pipe(finalize(() => this.blockUI.stop())).subscribe(data => {
      this.totalRegistros = data.totalElements;
      this.cidades.push(data.content);
      this.cidades = this.cidades[0];
      console.log(this.cidades)
    })

但后来我得到了错误

ERROR TypeError: Cannot read properties of undefined (reading 'push')

我的列表变为空的