Angular 4 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Posted 2023-02-23

【中文标题】Angular 4 找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

【英文标题】：Angular 4 Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

【发布时间】：2018-11-18 17:36:28

【问题描述】：

下面是代码：

component.ts

通过在路由中选择匹配获取 id，然后从 URL 中获取该 id

export class MatchComponent implements OnInit 
_postArrayMatch: match[];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) 

 ngOnInit()
 this.getMatchId();
 

 getMatchId() :void 
 this.route.params.forEach((params: Params)=> 
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => this._postArrayMatch = resultArray,
    error => console.log("Error ::" + error))
  )
 

---

component.html

通过 ngFor 循环进行基本插值

 <div *ngFor="let post of _postArrayMatch">
 <p>post.team1.name</p>
 </div>

---

service.ts

传递动态id

 getMatch(id:number): Observable<match[]>
    return this.http.get<match[]>(`http://localhost:3000/match/$id`)
    

界面

   export interface match
     team1:
      name:string,
      id:number
     
     team2:
      name:string,
      id:number
     
   

【问题讨论】：

那么问题是什么？听起来您知道您需要做什么，将您的导出界面更改为[team: string, name: string, id: number,...]，然后在您的html 中执行<p>post.name</p>。另外，在你的 foreach 中你可能想做 _postArrayMatch.push()

它不是那样工作的，问题是我从 api 接收到一个对象数组，我如何将对象转换为数组？这样我就可以执行 ngFor 循环

首先通过const keys = Object.keys(this._postArrayMatch)获取密钥。然后将每个对象推送到数组for(let i = 0; i < keys.length; i++) newArr.push(this._postArrayMatch[keys[i]], team: keys[i])。或者您也可以按照here

的说明使用管道

我不确定如何在我的情况下使用它，在我的解决方案中，我必须创建新文件还是可以在同一个组件中使用？我是否必须更改我的 getMatchId() 方法？

我发现了如何显示来自对象的数据- Team1: _postArrayMatch.team1[post]

【参考方案1】：

尝试这样的方法，在响应中创建对象

component.ts

export class MatchComponent implements OnInit 
_postArrayMatch: match[];
newArr: Array<Object> = [];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) 

 ngOnInit()
   this.getMatchId();
 

 getMatchId() :void 
  this.route.params.forEach((params: Params)=> 
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => 
      this._postArrayMatch = resultArray;
      const keys = Object.keys(this._postArrayMatch) // new stuff starts here
      for(let i = 0; i < keys.length; i++)  
        newArr.push(this._postArrayMatch[keys[i]]);
        newArr[i]['team'] = keys[i];
      
    ,
    error => console.log("Error ::" + error))
  )
 

然后您就可以访问您的 html 中的所有子对象

Component.html

 <div *ngFor="let post of newArr">
  <p> post.team: post.name</p>
 </div>

目前，您正在为团队 1 进行硬编码，如果您想这样做，那么您不应该使用 *ngFor

【参考方案2】：

这似乎是我能找到的关于如何从对象中获取数据的最简单方法。

<div *ngFor="let post of objectKeys(_postArrayMatch.team1)">
  <div>  Team1:  _postArrayMatch.team1[post]</div>
</div>  

组件.ts

objectKeys = Object.keys;

【讨论】：

'最简单的方法'但是你打算如何展示第 2 队？还是第 3 队？这被硬编码为仅适用于团队 1。我可以写一个正式的答案来告诉你我的意思

显然我只需要使用简单的插值，不需要 ngFor 循环 ***.com/questions/50803811/…