title: Angular 5 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays
body: <p>I have a list group which gets data from a rest service using HttpClient Post method.</p>
  
  <p>I get "Cannot find a differ supporting object error" intermittently. But when I refresh the browser the data is displayed and if I try to switch between compoenents, I can still see the data. But after 10 mins or so if I click try to access any component on the page, I get above error.</p>
  
  <p>Below is my code. Can you help me identifying what I am doing wrong?</p>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;div class="list-group"&gt;
          &lt;a
            routerLinkActive="active"
            routerLink="/home/switchroles/{{ account.acc_name }}"
            class="list-group-item list-group-item-action pl-1 pr-1 pt-1 pb-0 rounded-0"
            *ngFor="let account of allAccounts"&gt;{{ account.acc_dname }}
            &lt;!--&lt;span class="badge badge-pill badge-dark float-right"&gt;{{ account.Roles.length }}&lt;/span&gt;--&gt;
          &lt;/a&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>export class SwitchRolesComponent implements OnInit {
    allAccounts: Account[] = [];
    accountsCount: number;
    loading: boolean;
  
    constructor(private http: HttpClient, private dataservice: DataService) {
      this.loading = true;
    }
  
    ngOnInit() {
      this.dataservice.getAllAccounts().subscribe(
        res =&gt; {
          this.allAccounts = res;
          this.accountsCount = res.length;
          this.loading = false;
        },
        err =&gt; {
          console.log('Error Occoured');
          console.log(err);
        }
      );
    }
  }
  </code></pre>
  
  <p><strong>getAllAccounts function from a dataservice</strong></p>
  
  <pre><code>getAllAccounts(): Observable&lt;Account[]&gt; {
      return this.http.post&lt;Account[]&gt;('https://rest-url/Prod/getdata', {
        'operation': 'SelectFromMySQLDB',
        'data': {
          'query': 'select query here'
        }
      });
    }
  </code></pre>
  
  <p><strong>Account Class</strong></p>
  
  <pre><code>export class Account {
    constructor(
      public acc_name: string,
      public acc_dname: string,
      public acc_number: string,
      public acc_roles: string,
      public acc_desc: string,
    ) {}
  }
  </code></pre>
  
  <p><strong>Edit: Pring {{ allAccounts | json }}</strong></p>
  
  <pre><code>[
      {
          "idawsaccounts": 11,
          "acc_name": "test1",
          "acc_dname": "Test1",
          "acc_number": "123456789",
          "acc_roles": "Test roles",
          "acc_desc": "Test Desc"
      },
      {
          "idawsaccounts": 12,
          "acc_name": "test2",
          "acc_dname": "Test2",
          "acc_number": "123456789",
          "acc_roles": "Test roles",
          "acc_desc": "Test Desc"
      },
      {
          "idawsaccounts": 13,
          "acc_name": "test3",
          "acc_dname": "Test3",
          "acc_number": "123456789",
          "acc_roles": "Test roles",
          "acc_desc": "Test Desc"
      }
  ]
  </code></pre>