title: Error says: 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays'
body: <p>I have already looked into many questions like this but none of them could help me out. I'm receiving an object that returns a list of cities with their names, habitants and states.
  Here's my http service request:</p>
  <pre><code>cidadesUrl = 'http://localhost:8080/api/cidades';
  
    constructor(private http: HttpClient) { }
  
    listar(): Observable&lt;Cidade[]&gt;{
      return this.http.get&lt;Cidade[]&gt;(this.cidadesUrl);
    }
  </code></pre>
  <p>and here's the calling to the service:</p>
  <pre><code>  cidades!: Cidade[];
  
    constructor(private cidadeService:CidadeService) { }
  
    listar(){
      this.cidadeService.listar().subscribe(data =&gt; { this.cidades = data });
      console.log(this.cidades);
    }
  </code></pre>
  <p>and my html:</p>
  <pre><code>&lt;p-table [paginator]=&quot;true&quot; [rows]=&quot;4&quot; responsiveLayout=&quot;scroll&quot;&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; *ngFor=&quot;let cidade of tabela&quot;&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;&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;&gt;&lt;/button&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  <p>Tabela property:</p>
  <pre><code>@Input() tabela!: Cidade[];
  </code></pre>
  <p>I don't know why but when the page loads, i get the error:</p>
  <pre><code>ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
  </code></pre>
  <p>When I open the Network tab in console, the cities are there, but they dont show up in the table
  <a href="https://i.stack.imgur.com/fZgzg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fZgzg.png" alt="enter image description here" /></a></p>
  <p>Hoping that i could find a answer to this</p>