Angular 安格拉尔：我做错了什么？

我很难克服“找不到类型为“object”的不同支持对象“[object object]”错误，这似乎在Angular2中很常见，我希望有人遇到过类似的情况

以下是来自我的服务的（匿名）JSON，非常简单：

[
    {
        "item_id": 1,
        "item_type": 2,
        "item_name": "Item 1",
        "item_description": "First item"
    },
    {
        "item_id": 2,
        "item_type": 4,
        "item_name": "Item 2",
        "item_description": "Second item"
    }
]

下面是我的类、服务和组件的内容，它们描述了这些对象：

//item.ts
导出类项目{
项目编号：编号；
项目类型：编号；
项目名称：字符串；
项目描述：字符串；
}
//item.service.ts代码段
getItems（）：承诺{
返回此.http.get（'http://apiurl“，{withCredentials:true}）
.toPromise（）
。然后（（响应）=>{
让body=response.json（）；
将正文作为项目[]返回；
})
.接住（这个.把手错误）；
}
//item.component.ts代码段
项目：项目[]；
getItems（）：void{//调用项服务的函数
这是一项服务
.getItems（）
。然后（（项目）=>{
console.log（items）；//我用它来验证我得到的是一个数组。
这个项目=项目；
});
}

最后，ngFor组件：

<ul>
    <li *ngFor="let item of items">
        <i class="fa fa-database"></i> {{item.item_name}}
    </li>
</ul>

编辑2：

我明白了！我想这可能是Angular2的一只虫子。上面，我使用一个名为“items”的通用变量名对代码进行了清理。但在实际的生产代码中，该变量名为“entities”。在整个过程中，我都是这样命名的。一时兴起，我将变量的名称改为“testentities”，结果成功了

所以为了确定，我测试了多种变体，每次都有效。然后我把它改回“实体”，错误再次出现。它似乎是某种保留变量

我将对此进行严格测试，如果它始终是可复制的，我将在bug跟踪器上报告它。

试试看

item.service.ts代码片段

getItems(): Promise<Item[]> {
    return this.http.get('http://apiurl', { withCredentials: true })
    .toPromise()
    .then((response) => {
        let body = response.json();
        return body;
    })
    .catch(this.handleError);
}

items: Item[] = []; // For whatever reason it thinks this is an Object

getItems(): void { // Function that calls the item service
    //this.items = Array.from(this.items);
    this.itemService.getItems().then(items => this.items = items);
}

getItems(): Promise<Item[]> {
    return this.http.get('http://apiurl', { withCredentials: true })
    .toPromise()
    .then(this.extractData)
    .catch(this.handleError);
}
private extractData(res: Response) {
  let body = res.json();
  return body || { };
}
private handleError (error: any) {
  // In a real world app, we might use a remote logging infrastructure
  // We'd also dig deeper into the error to get a better message
  let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
  console.error(errMsg); // log to console instead
  return Promise.reject(errMsg);
}

[更新] Alight，您已经耗尽了我的调试资源，因此我将对其进行基本介绍

Angular 2向您展示了如何发出

GET

请求。然后是基于承诺的设置

所以离开这个，这就是你的样子

item.service.ts代码片段

getItems(): Promise<Item[]> {
    return this.http.get('http://apiurl', { withCredentials: true })
    .toPromise()
    .then((response) => {
        let body = response.json();
        return body;
    })
    .catch(this.handleError);
}

items: Item[] = []; // For whatever reason it thinks this is an Object

getItems(): void { // Function that calls the item service
    //this.items = Array.from(this.items);
    this.itemService.getItems().then(items => this.items = items);
}

getItems(): Promise<Item[]> {
    return this.http.get('http://apiurl', { withCredentials: true })
    .toPromise()
    .then(this.extractData)
    .catch(this.handleError);
}
private extractData(res: Response) {
  let body = res.json();
  return body || { };
}
private handleError (error: any) {
  // In a real world app, we might use a remote logging infrastructure
  // We'd also dig deeper into the error to get a better message
  let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
  console.error(errMsg); // log to console instead
  return Promise.reject(errMsg);
}

更新#2 听起来OP解决了他的问题，这与其中一个变量的名称有关，一个名为

entites

的变量可能会导致Angular 2断裂

但在实际的生产代码中，这个变量被称为“实体”。一直以来，我都是这样命名的。我一时兴起，将变量的名称改为“testentities”，结果成功了

所以为了确保这一点，我测试了多种变体，每次都有效。然后我将其改回“实体”，错误再次出现。”

---

语法看起来不错，所以一定是输入错误或其他什么，因为我看不出发布的内容有任何问题。确保所有变量拼写正确，对象属性拼写正确。还有这个和这个@Sasquatch3o3我仔细检查了变量名，它们都很好。如果我注释掉ngFor模板，组件加载时不会出现任何错误。哦，刚刚发现了一些可能有用的东西。如果我注释掉组件中的

this.items=items

行（保留Item[]数组为空），ngFor仍然抛出错误。因此它将

items:Item[]

视为一个对象，而不是数组，没有任何更改。想法？好的，酷，让我看看again@Sasquatch3o3看看它看起来是什么样子。变量的真实名称是“实体”，我认为它可能是内部保留的！这是个好主意，但恐怕不行。

项：项[]=[]部分”看起来应该强制项目成为数组，但完全相同的错误仍然存在。@DamonKaswell您是否有
数组。从（项目）
部分在那里？是的，它在那里。”。但我现在最担心的是，即使我根本不填充数组，ngFor仍然将它视为一个对象。@DamonKaswell好的，在这一行
console.log（items）；//我用它来验证我得到的是一个数组。
当你点击该行时，在开发者控制台中键入this
this.items instanceof array
和
items instanceof array
，它们都应该是true语句。我知道你认为
this.items
是一个对象，但这将验证它是什么。Javascript中的数组只是使用数字而不是stringsOK的对象，我认为我们正在变得越来越热。这不起作用，因为在检索数据时错误已经抛出。所以我在
items:Item[]=[]处设置了一个断点。有趣的是，如果我运行
this.items instanceof Array
，它将返回false！