title: Angular2 Observable, interating through object in service gives errors
body: <p>I've looked on the board and on many sites but can't find a solution to my issue.</p>
  
  <p>The issue has already been discussed but nothing seems to work on my code.
  So! First, the JSON produced by my middleware is like so:</p>
  
  <pre><code>{
    "uuid": "5c5260ec-5bcd-451a-ad68-57eb9572c185",
    "latitude": 41,
    "longitude": 1,
    "temoin": {
      "numeroDeTelephone": 342391,
      "nom": "bruce",
      "prenom": "wayne",
      "sexe": "m",
      "age": 12,
      "taille": 150,
      "poids": 62,
      "groupeSanguin": "a+"
    }
  }
  </code></pre>
  
  <p>As you can see, I have two objects (which are described in my Angular app) the main object is <code>signalement</code> which contains a <code>temoin</code> object.</p>
  
  <p><strong>Signalement</strong>:</p>
  
  <pre><code>import { TemoinObjet } from './temoin.objet';
  
  export class Signalement{
      public uuid: String;
      public latitude: any;
      public longitude: any;
      public temoin: TemoinObjet;    
  }
  </code></pre>
  
  <p><strong>Temoin</strong>:</p>
  
  <pre><code>export class TemoinObjet{
      public telephone: Number;
      public prenom: String;
      public nom: String;
      public sexe: String;
      public age: Number;
      public taille: Number;
      public poids: Number;
      public groupeSanguin: String;
  }
  </code></pre>
  
  <p>I switched from promises in the component to a service intended to get data:</p>
  
  <pre><code>import { Http, Response } from '@angular/http';
  import { Injectable } from '@angular/core';
  
  import { Observable } from 'rxjs/Rx';
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/add/operator/map';
  
  import { Signalement } from '../domain/objets/signalement.objet';
  import { TemoinObjet } from '../domain/objets/temoin.objet';
  
  @Injectable()
  export class SignalementService{  
      private urlRef: string = 'http://localhost:8080/Asklepios-1.0/ws/signalement';
  
      constructor(private http: Http) {
      }
  
      recupererSignalements():Observable&lt;Signalement[]&gt;{
          return this.http.get(this.urlRef).map((res:Response) =&gt; res.json());
      }
  
      get(uuidARetrouver: String, liste:any) : Signalement{
           return liste.find(s =&gt; s.uuid === uuidARetrouver);
      }
  }
  </code></pre>
  
  <p>I'm using the <code>recupererSignalements()</code> method which returns an Observable.</p>
  
  <p>In my component I've created a method with the same name and called it in the <code>ngOnInit</code>. Here's the full component:</p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  import { Signalement } from './domain/objets/signalement.objet';
  import { SignalementService } from './services/signalement.service';
  import { TemoinObjet } from './domain/objets/temoin.objet';
  import { Observable } from 'rxjs/Rx';
  
  @Component({
      selector: 'liste-signalement',
      templateUrl: './list_signalement.html',
      providers: [SignalementService]
  
  })
  
  export class ListSignalementsComponent implements OnInit {
      signalements: Signalement[];
  
      constructor(private signalementService: SignalementService){
      }
  
          ngOnInit(){
              this.recupererSignalements();
              console.log(this.signalements);
             }
  
             recupererSignalements(){
                 this.signalementService.recupererSignalements().subscribe(donnees =&gt; this.signalements = donnees, ()=&gt;console.log("Fail"), ()=&gt;console.log("Done : "+this.signalements));
             }
  }
  </code></pre>
  
  <p>Once it's done I want to iterate over the <code>signalements</code> array to show the information in my view, but everytime I get the error <code>Error: Error trying to diff '[object Object]' at DefaultIterableDiffer.diff</code>. When using <code>*ngFor</code> I instead see:</p>
  
  <pre><code>Error: Cannot find a differ supporting object '[object Object]' of type
  'object'. NgFor only supports binding to Iterables such as Arrays. at 
  NgForOf.ngOnChanges.
  </code></pre>
  
  <p>Here's the view :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let signalement of signalements"&gt;
          {{signalement.uuid}}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried the <code>asyncpipe</code>. Using this I get no more errors but can't see anything in my view.</p>