Angular 2 Observable，迭代服务中的对象会产生错误答案

【问题标题】：Angular2 Observable, interating through object in service gives errorsAngular 2 Observable，迭代服务中的对象会产生错误
【发布时间】：2017-04-11 21:40:22
【问题描述】：

我查看了公告板和许多网站，但找不到解决问题的方法。

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

信号：

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

我从组件中的 promise 切换到旨在获取数据的服务：

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());对此：return this.http.get(this.urlRef) .map((res:Response) => res.json()) .do(data => console.log(JSON.stringify(data))); 看看返回的内容...（好吧，我想我无法格式化 cmets 部分中的代码...希望您可以阅读。）
另外，您是否希望获得其中之一？还是这些数组？此代码暗示一个数组：Observable<Signalement[]>
我确实期待一个数组。对于 stringify，我遇到了另一个错误： TypeError: this.http.get(...).map(...).do is not a function 另外，当我在订阅中执行 console.log 时，我得到了这个： Object { uuid：“5c5260ec-5bcd-451a-ad68-57eb9572c185”，纬度：41，经度：1，temoin：对象} 纬度：41 经度：1 temoin：对象 uuid：“5c5260ec-5bcd-451a-ad68-57eb9572c185”proto : 对象
确实需要另一个导入。
从 'rxjs/Observable' 导入 { Observable }；导入'rxjs/add/operator/do';

标签： arrays angular angular2-services angular2-observables

【解决方案1】：

这里的问题是 ngFor 需要一个数组——尽管它相当于 Angular 2+ 世界中的 ng-repeat，但它被设计为仅对数组进行操作，从而无需考虑 ng-repeat 涵盖的许多边缘情况，包括迭代非可迭代对象（例如对象，在您的情况下）。

如果您只是想呈现一个信号元素列表，那么一个信号元素只需要在一个数组中。如果您尝试迭代一个 Signalement 的属性，则需要编写一个管道，将对象转换为键数组，例如“ngx-pipes”库中的“键”管道。

【讨论】：