我已經查看了董事會和許多網站,但找不到解決方案。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
。使用這個我沒有更多的錯誤,但在我看來什麼都看不到。
試着改變它: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
另外,你是否期望得到其中的一個?或者這些數組?這段代碼暗示着一個數組:'Observable' –
DeborahK
我期待着一個數組的確的。 對於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