Angular2 Observable Observable、サービス中のオブジェクトを介して介入するとエラーが発生します

Question

私はボードを見て、多くのサイトで問題を解決できませんでした。

問題はすでに議論されていますが、私のコードでは何も問題ないようです。 だから！まず、私のミドルウェアによって生成JSONはそうのようなものです：あなたが見ることができるように、私は（私の角度アプリで記述されている）主な目的は、temoinオブジェクトを含むsignalementある2つのオブジェクトを持っている

{ 
    "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+" 
    } 
} 

。

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; 
} 

私がデータを取得することを意図したサービスにコンポーネントでの約束からの切り替え：

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); 
    } 
} 

私は」私はObservableを返すメソッドrecupererSignalements()

私のコンポーネントでは、同じ名前のメソッドを作成し、ngOnInitで呼び出しました。ここでは、完全なコンポーネントです：

私が私の見解で情報を表示する signalements配列を反復処理したい行うのが、毎回私はエラー Error: Error trying to diff '[object Object]' at DefaultIterableDiffer.diffを得れば

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)); 
      } 
} 

。 *ngForを使用する場合は、私が代わりに参照してください。

Error: Cannot find a differ supporting object '[object Object]' of type 
'object'. NgFor only supports binding to Iterables such as Arrays. at 
NgForOf.ngOnChanges. 

ここでは、ビューの：

<ul> 
    <li *ngFor="let signalement of signalements"> 
     {{signalement.uuid}} 
    </li> 
</ul> 

私はasyncpipeを試みました。これを使用してもエラーはなくなりますが、私の見解では何も見えません。

Answer 1

ここで問題となるのは、ngForは配列を期待していることです - 角度2+の世界ではng-repeatと同等ですが、多くのエッジケースを考慮する必要性を排除する配列でのみ動作するように設計されていますng-repeat （オブジェクトのような）あなたのケースでは反復不可能なものを繰り返します。

もしあなたが単に感嘆符のリストをレンダリングしようと思っているのであれば、1つの感嘆符は配列の中にある必要があります。あるSignalementのプロパティを繰り返し処理しようとしている場合は、オブジェクトを 'ngx-pipes'ライブラリの「keys」パイプなどのキー配列に変換するパイプを記述する必要があります。