获取对象中的对象数组 - 尝试区分“[object Object]”时出错答案

【问题标题】：getting an array of objects within an object - Error trying to diff '[object Object]'获取对象中的对象数组 - 尝试区分“[object Object]”时出错
【发布时间】：2017-05-11 19:00:46
【问题描述】：

当我尝试在对象中获取对象的数据并且不确定返回我需要的数据数组的正确映射是什么时，我的控制台出现错误，在这种情况下是 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>

【问题讨论】：

标签： javascript json angular typescript

【解决方案1】：

您应该访问 results 对象内的 results 数组，因此 ngFor 看起来像， p>

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

【讨论】：

我已经尝试过了，但我得到了这个控制台错误：`Error trying to diff '[object Object]'`
上述方法你试过了吗？
我不确定是否必须在获取数据后更改映射中的某些内容以直接获取结果对象
results 包含对象列表。
将您的 getData 更改为 getData(): Observable {

【解决方案2】：

您应该使用async 管道将可观察对象链接到模板：

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

【讨论】：