Сопоставление объекта JSON с классом TypeScript/Ошибка при попытке сравнения «[object Object]». Разрешены только массивы и итерации

Я пытаюсь изучить Angular2. Я делаю запрос http get, но получаю следующую ошибку времени выполнения:

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

но у меня должен быть массив объектов, поэтому я не уверен, почему я получаю это сообщение.

в HTML у меня есть

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

и эта ошибка в консоли

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)

из моего компонента:

hierarkiItemsList: Массив;

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

Вот мой джсон

{
"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":[]
    } 
]
}