我目前正在开发一个crud应用程序的前端部分。当我遇到这个错误时，我正在实现惰性分页
错误：NG0900：尝试比较"[object Object]"时出错。只允许数组和可迭代对象
我已经查了很多有同样错误的问题，但没有找到解决方法
观察结果：已尝试使用管道| keyvalue，不起作用
下面是我传递给pagination**= 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);
  }
  ...

• • 我的组件. 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)

有人能帮帮我吗？

***UPDATE***我考虑过在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)
    })

但是我得到了错误
错误类型错误：无法读取未定义的属性（读取"push"）
我的名单就空了