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 在同一行的同一个对象上
不要忘记接受和支持对您有帮助的答案>_>

标签： html angular spring-boot

【解决方案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

【讨论】：