Question

我看过电路板和许多网站，但找不到我的问题的解决方案。

这个问题已经讨论过了，但我的代码似乎没有任何效果。所以！首先，我的中间件生成的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+"
  }
}

如您所见，我有两个对象（在我的Angular应用程序中描述）主对象是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;
}

我从组件中的promises切换到了一个旨在获取数据的服务：

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。使用这个我没有更多的错误，但在我的视图中看不到任何东西。

Answer 1

这里的问题是ngFor期望一个阵列 - 虽然它相当于Angular 2+世界中的ng-repeat，但它被设计为仅在阵列上运行，这样就不需要考虑ng-repeat覆盖的许多边缘情况，包括迭代非迭代（例如对象，在你的情况下）。

如果您只想渲染一个Signalements列表，那么一个Signalement只需要在一个数组中。如果您尝试迭代一个Signalement的属性，则需要编写一个管道，将对象转换为一个键数组，例如'ngx-pipes'库中的“keys”管道。

Angular2 Observable，通过服务中的对象进行交互会产生错误

1 个答案: