获取对象内的对象数组 - 尝试差异'[对象对象]'错误'

Question

我在我的控制台中收到错误，当我试图获取对象内的对象的数据，并不知道什么是正确的映射到返回我需要的数据的数组，在这种情况下是results。

这里是我的JSON文件的外观：

{ 
"count": 101, 
"results": //this is an array[ 
    object 1, 
    object 2,.... 
} 

我的服务电话：

getData(){ 
     return this._http.get('url') 
     .map((res:Response) => res.json()) 
     .catch(this.handleError); 
    } 

我的组件文件：

getData(){ 
    this.service.getData().subscribe(
     data => this.results = data, 
     error => this.errorMessage = <any>error 
    ); 
    } 

HTML：

<tr *ngFor="let item of results"> 
    <td><a style="cursor: pointer">{{item.title}}</a></td> 
</tr> 

Answer 1

你应该访问results对象内部results阵列，所以ngFor的样子，

<tr *ngFor="let item of results.results"> 
    <td><a style="cursor: pointer">{{item.title}}</a></td> 
</tr> 

Answer 2

您应该使用async管观测到Template：

<tr *ngFor="let item of (service.getData() | async).results"> 
    <td><a style="cursor: pointer">{{item.title}}</a></td> 
</tr> 

我认为你的错误来自results是undefined如果请求尚未完成或失败。使用async管道将删除此问题。

如果你仍然想在你的组件来处理错误，你可以像它：

组件：

public getServiceData:Observable<any>{ 
    return this.service.getData().catch(err => this.errorMessage = <any>err); 
} 

HTML：

<tr *ngFor="let item of (getServiceData() | async).results"> 
    <td><a style="cursor: pointer">{{item.title}}</a></td> 
</tr>