Ionic渲染用户资料至HTML表单报错：NgFor仅支持可迭代对象

嘿，别着急，这个问题其实很常见，刚接触Angular/Ionic的朋友经常会碰到！我来帮你分析一下：

错误原因 #

你看到的报错Cannot find a differ supporting object '[object Object]'，核心问题是：Angular的*ngFor指令只能用来遍历可迭代对象（比如数组），但你的foundUser是一个单个的用户对象，不是数组，所以Angular不知道怎么用ngFor去循环它。

看你的代码就能发现问题：在profile.ts的loadUser方法里，你把接口返回的数组第一个元素赋值给了foundUser：

this.foundUser = res.results[0]; // res.results是数组，[0]取到的是单个对象

但在profile.html里，你却用了*ngFor="let user of foundUser"，这就导致了冲突。

两种解决方案 #

方案一：不需要循环，直接使用单个对象（推荐，因为你只取了一个用户） #

既然你只需要展示单个用户的数据，完全没必要用*ngFor。直接修改profile.html：

• 去掉<ion-list>上的*ngFor指令
• 把模板里的user替换成foundUser，同时可以加上安全导航符?.避免异步加载时的undefined错误

修改后的profile.html代码：

<ion-content padding class="background">
  <ion-card>
    <form [formGroup]="form" (ngSubmit)="saveEntry()">
      <ion-list>
        <ion-item>
          <ion-label floating>Name</ion-label>
          <ion-input type="text" name="cust_name" formControlName="cust_name" value="{{foundUser?.name.last}}"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label floating>Username</ion-label>
          <ion-input type="text" name="username" formControlName="username" [(ngModel)]="foundUser?.login.username"></ion-input>
        </ion-item>
      </ion-list>
      <button ion-button block outline color="light">Update</button>
    </form>
  </ion-card>
</ion-content>

方案二：把单个对象包装成数组（适合以后可能扩展为多用户的场景） #

如果你希望保留*ngFor（比如以后要展示多个用户），只需要把foundUser改成数组类型，然后把单个用户对象放进数组里：

修改profile.ts的代码：

export class ProfilePage {
  data:any = {};
  public form: FormGroup;
  public foundUser: any[] = []; // 声明为数组并初始化
  loadUser(){
    this.peopleService.loadUser()
      .subscribe((res)=>{
        this.foundUser = [res.results[0]]; // 把单个对象包装成数组
      });
  }
  ionViewDidLoad() {
    this.loadUser();
  }
}

这样*ngFor="let user of foundUser"就能正常遍历这个只有一个元素的数组了。

另外提醒一句：因为接口请求是异步的，页面初始化时foundUser可能还没拿到数据，所以加上*ngIf="foundUser"或者安全导航符?.能避免页面报错哦～

内容的提问来源于stack exchange，提问作者nas