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

Question

I'm developing the front-end of a crud application on angular, and i got this error when passing an array:

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

How can i solve the error?

Here's my method to list the cities:

listar(pagina:number = 0){
    this.filtro.estado = this.estadoSelected.name;
    this.filtro.page = pagina;
    this.cidadeService.listar(this.filtro).subscribe(data => {
      const contentKey:any = Object.values(data)[0];
      const registros:any = Object.values(data)[2];
      this.totalRegistros = registros;
      this.cidades = contentKey;
      console.log(Array.isArray(this.cidades))
      console.log(this.cidades);
    });
  }

This is what i get from console.log

Any type of help is very appreciated

Answer 1

There's an different component for the table, so I solved the problem putting an @Input on the table.component.ts to receive the value of my array 'cidades'

table.component.ts:

@Input() tabela!: any[];

table.component.html:

<p-table [value]="tabela" ...

cities.component.html

<app-tabela-cidades [tabela]="cidades" [size]="filtro.size"></app-tabela-cidades>

Answer 2

ERROR Error: NG0900: Error trying to diff ''. Only arrays and iterables are allowed

In my case, I had a custom component that was included in the Form Group. The error was that instead of the standard value in the Form Group is a string instead of an array as expected.

const formGroup: any = {
  tags: [''], <--
};
this.generatorForm = this.fb.group(formGroup);

So the form is trying to compare something with a string instead of an array. To fix this I just added an array there.

const formGroup: any = {
  tags: [[]], <--
};
this.generatorForm = this.fb.group(formGroup);