无法使用 ngFor [重复]答案

【问题标题】：Can't use ngFor [duplicate]无法使用 ngFor [重复]
【发布时间】：2019-10-22 18:04:38
【问题描述】：

我正在尝试使用ngFor 循环从我的数组中获取数据。我明白了

"找不到不同的支持对象 '[object Object]' 类型 'object'.NgFor 只支持绑定到数组等Iterables”。

我该如何解决？

我如何获取数据

if (this.resources$) {
  this.resources$.subscribe(result => {
    if (result)  {
      this.resourcesList = <Resources[]>result;

      this.showResources = true;
    }
  });



export interface Resources {
 Id: number;
 Name: string; 
}

我正在尝试这样使用它

<div *ngFor="let res of resourcesList">{{res.Name}}</div>

【问题讨论】：

语法看起来正确。请检查 resourceslist 变量的内容。设置断点或显示：{{ resourcesList | json}}
也许你的 resourcesList 没有设置，因为你从来没有进入包装 if 条件？你能试着记录一下吗？顺便说一句 - 您应该能够使用异步管道直接 DOM 订阅您的资源$ Observable：*ngFor="let res of resources$ | async"。使用它，您不需要任何 .ts 逻辑，只需要可观察的 resources$。
检查后端返回的内容，确保它是一个数组，而不是包含数组的对象。
result = {Resources: Array(1), ItemCount = 1}

标签： angular

【解决方案1】：

如果你想遍历一个对象，你可以使用keyvalue 管道。

<div *ngFor="let res of resourcesList | keyvalue">
    {{res | json}}
</div>

【讨论】：

我认为这是一个列表
它是工作并显示所有值。当我试图 gest res.Name 时不要。
你能告诉我你的回应吗？ {{res | json}} 会显示什么？
keyvalue 管道将您的回复转换为 key value 对
你可以通过这个{{res.value?.name}}得到名字

【解决方案2】：

resourcesList 必须是一个数组。
将resourcesList初始化为一个空数组，即public resourcesList : any = []
确保this.resources$.subscribe(...) 发送的响应是对象数组
更改<div *ngFor="let res of resourcesList">{{res?.Name}}</div>

【讨论】：

【解决方案3】：

根据您对另一个答案的评论，您的后端以这种格式返回一个对象：

{
  "ItemsCount": 1,
  "Resources": [
    {
      "Name": "Garaż wolnostojący 1",
      "DerivedFullName": "Garaż wolnostojący 1",
      "ParentId": 0,
      "IsLinkPossible": true,
      "Children": [],
      "Code": "",
      "Path": "Garaż wolnostojący 1",
      "Description": "",
      "Id": 186973
    }
  ]
}

哪个不是数组，数组在response.Resources，所以这样做：

this.resourcesList = <ResourcesDetailsToIssueResponse[]>result.Resources;

可能会为您完成这项工作。

【讨论】：

是的，谢谢，这是工作