title: Using *ngFor for an array showing error about object
body: <p>I am making a call to a postcode to address API. I want to display the list of addresses in my app.</p>
  
  <pre><code>public lookupAddresses: any = {};
  </code></pre>
  
  <p>To make my API call I am using:</p>
  
  <pre><code>var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');  
  
  this.http.get('https://api.getAddress.io/v2/uk/nn13er?api-key=my-api-key&amp;format=true', {headers:headers}).map(res =&gt; res.json().Addresses).subscribe(data =&gt; {
      this.lookupAddresses = data
      console.log(data);
  }); 
  </code></pre>
  
  <p>And then within my template I have:</p>
  
  <pre><code>&lt;ion-list&gt;
      &lt;ion-item *ngFor="let address of lookupAddresses"&gt;
          {{ address[0] }}
      &lt;/ion-item&gt;         
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>But I get this error ..</p>
  
  <pre><code>Error in ./RegisterPage class RegisterPage
  caused by: Cannot find a differ supporting object 
  '[object Object]' of type 'object'. NgFor only supports 
  binding to Iterables such as Arrays.
  </code></pre>
  
  <p>If I console.log the value of data then I get this structure.</p>
  
  <pre><code>Array[42]
  0 : Array[5]
      0 : "10 Watkin Terrace"
      1 : ""
      2 : ""
      3 : "Northampton"
      4 : "Northamptonshire"
      length : 5
  1 : Array[5]
      0 : "11 Watkin Terrace"
      1 : ""
      2 : ""
      3 : "Northampton"
      4 : "Northamptonshire"
      length : 5
  2 : Array[5]
      0 : "12 Watkin Terrace"
      1 : ""
      2 : ""
      3 : "Northampton"
      4 : "Northamptonshire"
      length : 5      
  ....
  </code></pre>