无法使用 ngFor [重复]

Posted 2023-02-22

【中文标题】无法使用 ngFor [重复]

【英文标题】：Can't use ngFor [duplicate]

【发布时间】：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

【参考方案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;

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

【讨论】：

是的，谢谢，这是工作