Angular2 Observable, interating through object in service gives errors - arrays

Question

I've looked on the board and on many sites but can't find a solution to my issue.
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:
{
"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+"
}
}
As you can see, I have two objects (which are described in my Angular app) the main object is signalement which contains a temoin object.
Signalement:
import { TemoinObjet } from './temoin.objet';
export class Signalement{
public uuid: String;
public latitude: any;
public longitude: any;
public temoin: TemoinObjet;
}
Temoin:
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;
}
I switched from promises in the component to a service intended to get data:
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<Signalement[]>{
return this.http.get(this.urlRef).map((res:Response) => res.json());
}
get(uuidARetrouver: String, liste:any) : Signalement{
return liste.find(s => s.uuid === uuidARetrouver);
}
}
I'm using the recupererSignalements() method which returns an Observable.
In my component I've created a method with the same name and called it in the ngOnInit. Here's the full component:
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 => this.signalements = donnees, ()=>console.log("Fail"), ()=>console.log("Done : "+this.signalements));
}
}
Once it's done I want to iterate over the signalements array to show the information in my view, but everytime I get the error Error: Error trying to diff '[object Object]' at DefaultIterableDiffer.diff. When using *ngFor I instead see:
Error: Cannot find a differ supporting object '[object Object]' of type
'object'. NgFor only supports binding to Iterables such as Arrays. at
NgForOf.ngOnChanges.
Here's the view :
<ul>
<li *ngFor="let signalement of signalements">
{{signalement.uuid}}
</li>
</ul>
I've tried the asyncpipe. Using this I get no more errors but can't see anything in my view.

Answer 1

The issue here is that ngFor expects an array – although it's the equivalent of ng-repeat in Angular 2+ world, it was designed to only operate on arrays which removes the need to account for the many edge cases ng-repeat covered, including iterating over non-iterables (such as objects, in your case).
If you're just looking to render a list of Signalements, then the one Signalement just needs to be inside an array. If you're trying to iterate over the properties of one Signalement, you would need to write a pipe that converts an object into an array of keys, such as the "keys" pipe in the 'ngx-pipes' library.