TypeScriptクラスへのJSONオブジェクトのマッピング/ [オブジェクトオブジェクト]を比較しようとしてエラーが発生しました。配列とiterableのみが許されます

Question

私はAngular2を学びたいと思っています。私は、HTTP GETリクエストを行ったが、次のランタイムエラーを取得しています：

Error trying to diff '[object Object]'. Only arrays and iterables are allowed 

をしかし、私はそのメッセージを取得し、なぜ私はわからないだので、私は、オブジェクトの配列を持っている必要があります。

hierarkiItemsList：私は私のコンポーネントからコンソール

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed 
at DefaultIterableDiffer.diff (core.js:7342) 
at NgForOf.ngDoCheck (common.js:2550) 
at checkAndUpdateDirectiveInline (core.js:12098) 
at checkAndUpdateNodeInline (core.js:13598) 
at checkAndUpdateNode (core.js:13541) 
at debugCheckAndUpdateNode (core.js:14413) 
at debugCheckDirectivesFn (core.js:14354) 
at Object.View_HomeComponent_0.__WEBPACK_IMPORTED_MODULE_1__angular_core__._37._co [as updateDirectives] (home.component.html:16) 
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) 
at checkAndUpdateView (core.js:13508) 

で

<li *ngFor="let x of hierarkiItemsList"> 
     {{ x.id }} 
     </li> 

と、このエラーが発生しているHTMLで

アレイと、

ngOnInit() { 
this.isLoading = true; 

this.isHierarkiItemsListLoading = true; 
this.hierarkiItemsList = new Array<HierarkiItem>(); 

this.siteService.getHierarkiItems({ category: 'xxdev' }) 
    .pipe(finalize(() => { this.isHierarkiItemsListLoading = false; })) 
    .subscribe(postingList => this.hierarkiItemsList = postingList); 
} 

これは、ここで

getHierarkiItems(context: SiteContext): Observable<Array<HierarkiItem>> { 

return this.http.get(routes.hierarkiItems(context), { cache: true }) 
    .map((res: Response) => <Array<HierarkiItem>>res.json()) 
    .do(data => console.log(data)) 
    .catch(this.handleError);  
} 

データを取得し、私のクラスにマップ私のサービスでは、私の方法では、私のクラスである：ここでは

export class HierarkiItem { 

    template: string; 
    diplayName: string; 
    dummypath: string; 
    id: number; 
    sequence: number; 
    published: string; 
    lastModified: string; 
    tags: Array<string>; 
    categories: Array<string>; 
    children: Array<string>; 
} 

は私のJSONは

です

{ 
"artifacts": [ 
    { 
     "template": "page", 
     "displayName": "page A", 
     "dummypath" : "/api/pages/1000.json", 
     "id": 1000, 
     "sequence": 1, 
     "publishTimestamp": "01-01-2017 14:00", 
     "lastModifiedTimestamp": "01-01-2017 14:00", 
     "tags":[ 
      "page A" 
     ], 
     "catgories":[ 
      "category A" 
     ], 
     "children":[] 
    }, 
    { 
     "template": "page", 
     "displayName": "page B", 
     "dummypath" : "/api/pages/1001.json", 
     "id": 1001, 
     "sequence": 2, 
     "publishTimestamp": "02-01-2017 14:00", 
     "lastModifiedTimestamp": "02-01-2017 14:00", 
     "tags":[ 
      "page B" 
     ], 
     "catgories":[ 
      "category B" 
     ], 
     "children":[] 
    } 
] 
} 

Answer 1

抽出データと似ています（A pi）は配列ではなくオブジェクトです。私は、これは動作するはずだと思う

return this 
    .http.get(routes.hierarkiItems(context), { cache: true }) 
    .map((res: Response) => <Array<HierarkiItem>>res.json().artifacts) 

：

あなたはこれを使用することができます。