title: Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
body: <p>Im currently developing the frontend part of a crud application. I was implementing lazy pagination when I got this error</p>
  <blockquote>
  <p>Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed</p>
  </blockquote>
  <p>I have already looked into planty of questions with the same error, but I didn't find any solutions</p>
  <p>Obs: already tried using the pipe <code>| keyvalue</code>, didnt work</p>
  <p>Here is a part of the <strong>object I'm passing to the pagination</strong> = cidades:</p>
  <pre class="lang-json prettyprint-override"><code>[
      {
          &quot;id&quot;: 6,
          &quot;nome&quot;: &quot;Florianópolis&quot;,
          &quot;qtdHabitantes&quot;: null,
          &quot;estado&quot;: &quot;SC&quot;
      },
      ...
  ]
  </code></pre>
  <p>Here's the <strong>service where i do the request</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>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&lt;any&gt;{
      const options = RequestUtil.buildOptions(Object.assign(filtro, pageable));
      return this.http.get&lt;any&gt;(`${this.cidadesUrl}`, options);
    }
    ...
  </code></pre>
  <p><strong>My component.ts:</strong></p>
  <pre class="lang-js prettyprint-override"><code>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(() =&gt; this.blockUI.stop())).subscribe(data =&gt; {
        this.totalRegistros = data.totalElements;
        this.cidades = data.content;
      }),
      retry(3),
      catchError(error =&gt; {
        console.log('Não foi possível listar as cidades');
        return of(0);
      });
    }
  </code></pre>
  <p>And last my <strong>component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *blockUI=&quot;'lista-cidades'&quot;&gt;
    &lt;p-table [value]=&quot;cidades&quot; #grid
      [lazy]=&quot;true&quot; [totalRecords]=&quot;registros&quot; (onLazyLoad)=&quot;aoMudarPagina($event)&quot;
    [paginator]=&quot;true&quot; [rows]=&quot;size&quot; responsiveLayout=&quot;scroll&quot;&gt;
  
      &lt;ng-template pTemplate=&quot;emptymessage&quot;&gt;
        &lt;tr&gt;&lt;td&gt;Nenhuma cidade encontrada&lt;/td&gt;&lt;/tr&gt;
      &lt;/ng-template&gt;
  
      &lt;ng-template pTemplate=&quot;header&quot;&gt;
          &lt;tr&gt;
              &lt;th&gt;Nome&lt;/th&gt;
              &lt;th&gt;Habitantes&lt;/th&gt;
              &lt;th&gt;Estado&lt;/th&gt;
              &lt;th&gt;Ações&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
  
      &lt;ng-template pTemplate=&quot;body&quot; let-cidade&gt;
          &lt;tr&gt;
              &lt;td&gt;{{cidade.nome}}&lt;/td&gt;
              &lt;td&gt;{{cidade.qtdHabitantes | number}}&lt;/td&gt;
              &lt;td&gt;{{cidade.estado}}&lt;/td&gt;
              &lt;td class=&quot;acoes&quot;&gt;
                &lt;button pButton icon=&quot;pi pi-pencil&quot; pTooltip=&quot;Editar&quot; tooltipPosition=&quot;top&quot; [routerLink]=&quot;['/cidades', cidade.id]&quot;&gt;&lt;/button&gt;
                &lt;button pButton class=&quot;p-button-danger&quot; icon=&quot;pi pi-trash&quot;  pTooltip=&quot;Excluir&quot; tooltipPosition=&quot;top&quot;
                (click)=&quot;deletar(cidade)&quot;&gt;&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/ng-template&gt;
    &lt;/p-table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>error log:</p>
  <pre><code>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)
  </code></pre>
  <p>Can someone help me?</p>
  <p><em><strong>UPDATE</strong></em>
  I have thinked about implementing this code in the <code>listar()</code> method:</p>
  <pre><code>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(() =&gt; this.blockUI.stop())).subscribe(data =&gt; {
        this.totalRegistros = data.totalElements;
        this.cidades.push(data.content);
        this.cidades = this.cidades[0];
        console.log(this.cidades)
      })
  </code></pre>
  <p>but then i get the error</p>
  <blockquote>
  <p>ERROR TypeError: Cannot read properties of undefined (reading 'push')</p>
  </blockquote>
  <p>And my list becomes empty</p>