獲取對象內的對象數組 - 嘗試差異'[對象對象]'錯誤'

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>