2017-04-11 33 views
0

我已經查看了董事會和許多網站,但找不到解決方案。Angular2 Observable,通過服務中的對象進行交互會產生錯誤

這個問題已經被討論過了,但是我的代碼似乎沒有任何效果。 所以!首先,我中間件產生的JSON是像這樣:

{ 
    "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含有temoin對象。

Signalement

import { TemoinObjet } from './temoin.objet'; 

export class Signalement{ 
    public uuid: String; 
    public latitude: any; 
    public longitude: any; 
    public temoin: TemoinObjet;  
} 

泰穆安

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中調用它。下面是完整的組件:

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

一旦完成我想遍歷數組signalements展現在我看來,信息,但每次我得到的錯誤Error: Error trying to diff '[object Object]' at DefaultIterableDiffer.diff。當使用*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。使用這個我沒有更多的錯誤,但在我看來什麼都看不到。

+0

試着改變它:return this.http.get(this.urlRef).map((res:Response)=> res.json()); (this): 'return this.http.get(this.urlRef) .map((res:Response)=> res.json()) .do(data => console.log(JSON.stringify(data) ));' 然後看看返回結果是什麼......(好吧,我想我不能在註釋部分格式化代碼......希望你能看懂這個。) – DeborahK

+0

另外,你是否期望得到其中的一個?或者這些數組?這段代碼暗示着一個數組:'Observable ' – DeborahK

+0

我期待着一個數組的確的。 對於stringify我得到了另一個錯誤:TypeError:this.http.get(...)。map(...)。do不是函數 另外,當我在訂閱我做了一個console.log我得到此: 對象{UUID: 「5c5260ec-5bcd-451A-ad68-57eb9572c185」,緯度:41,經度:1,泰穆安:對象} 緯度 :經度 :泰穆安 : 對象 uuid : 「5c5260ec-5bcd-451a-ad68-57eb9572c185」 __proto__ : 對象 – raik

回答

2

這裏的問題是,ngFor期待一個數組 - 雖然它在Angular 2+世界中等同於ng-repeat,但它被設計爲僅對數組進行操作,從而不需要考慮多個邊界情況。包括迭代非迭代(例如對象,在你的情況下)。

如果您只是想呈現Signalements列表,那麼Signalement只需要在一個數組內。如果您試圖遍歷一個Signalement的屬性,則需要編寫一個管道將對象轉換爲一個鍵數組,例如「ngx-pipes」庫中的「keys」管道。

相關問題