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

Posted 2023-02-27

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

【英文标题】：Angular 'Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.'Angular'找不到'object'类型的不同支持对象'[object Object]'。 NgFor 仅支持绑定到 Iterables，例如 Arrays。

【发布时间】：2020-10-17 10:29:08

【问题描述】：

我正在创建一个 Angular 应用程序，该应用程序显示来自 postgresql 数据库的项目列表和用户列表，但在 html 中显示用户列表时遇到问题。 问题是无论我做什么，Angular 都将我的数组视为一个对象。 相同的代码适用于项目，但不适用于用户。

这是我的服务：

    import  environment  from "../../../environments/environment";
    import  Observable  from 'rxjs';
    import  Projet  from '../modele/projet.model';
    import  Test  from '../modele/test.model';
    import  HttpParams,HttpClient  from "@angular/common/http";
    import  Injectable  from "@angular/core";
    import  map  from 'rxjs/operators';
    import  User  from '../modele/user.model';
    import  Financement  from '../modele/financement.model';
        
    @Injectable()
    export class WebService 
            
        constructor(private httpClient: HttpClient)  
            
        serverUrl: string = "http://localhost:8080/"
              
        get(url: string): Observable<any> 
            return this.httpClient.get(this.serverUrl + url);
        
    

组件：

    import  Component, OnInit  from '@angular/core';
    import  User  from '../../shared/modele/user.model';
    import  Router  from '@angular/router';
    import  WebService  from '../../shared/sevices/web.service';
    import  FormGroup, FormBuilder, FormControl, Validators, Form  from '@angular/forms';
    
    @Component(
      selector: 'app-show-users',
      templateUrl: './show-users.component.html',
      styleUrls: ['./show-users.component.scss']
    )

    export class ShowUsersComponent implements OnInit 
    
        ngOnInit(): void 
          this.getData();
        
        usersList: Array<User>
        user: User 
        myForm: FormGroup;
      
        constructor(private webService: WebService, private formBuilder: FormBuilder,private router: Router)  
      
        getData(): void 
          this.webService.get("showUsers").subscribe(res => 
            let response = JSON.parse(JSON.stringify(res))
            this.usersList = response.data
      
          )
        
      

html：

        <tr *ngFor="let user of usersList">
            <td>user.name</td>            
            <td>user.username</td>
            <td>user.email</td>
        </tr>

这是服务器响应： server response

注意：完全相同的代码适用于对象 PROJECT

【问题讨论】：

能否请您发布您从其余电话中得到的回复？似乎只有那个有问题。

你为什么要 JSON.stringify 然后 JSON.parse 在同一行的同一个对象上

不要忘记接受和支持对您有帮助的答案>_>

【参考方案1】：

您需要确保传递给*ngFor 的变量是一个数组。您可以使用Array.from(v) 确保这一点，也可以使用Object.values(v) 剥离可能从服务器端发送的对象的任何键：

this.webService.get("showUsers").subscribe(res => 
  this.usersList = Array.from(Object.values(res.data.body.data));
)

【讨论】：

变量 this.usersList 已经声明为数组

不管你声明它是什么类型，你仍然需要清理你收到的实际数据。 TypeScript 类型只是编译时检查。 Angular 说它不能对对象执行 ngFor 的原因只有一个：因为它是对象而不是数组：p

我自己也遇到过几次这个错误，即使数据看起来像是一个数组。试一试;)

它给了我这个错误 ERROR TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at Function.from ()

哦，嗯，你可能没有先设置this.usersList的值，我的回答可能有点混乱，我会更新

【参考方案2】：

您不需要此代码：

let response = JSON.parse(JSON.stringify(res))
this.usersList = response.data

简单地使用：

this.userlist = res

你完整的方法：

this.webService.get("showUsers").subscribe(res => 
  this.userlist = res
);

【讨论】：

还是同样的问题，Angular 仍在考虑我的数组作为对象

【参考方案3】：

就我而言，我有一个简单的方法，但我花了很多时间。你可以试试这个：

datas: any;

this.token = JSON.parse(window.localStorage.getItem('token'));

this.authService.getData(this.token.id).subscribe(data =>  
    this.datas = data;  
)

在 HTML 模板中，只需使用 this.datas.id, this.datas.username 而不是 *ngFor