将 JSON 对象映射到 TypeScript class / 尝试区分“[object Object]”时出错。只允许数组和可迭代对象

Question

我正在努力学习 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);
}

这是我服务中获取数据并将其映射到我的 class

的方法

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

这是我的 class:

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

看起来您的提取数据（来自 Api）是对象而不是数组。

你可以使用这个：

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

我认为这应该可行。

将 JSON 对象映射到 TypeScript class / 尝试区分“[object Object]”时出错。只允许数组和可迭代对象

Mapping JSON object to TypeScript class / Error trying to diff '[object Object]'. Only arrays and iterables are allowed

angular2-services

angular-cli