Question

我正在尝试更新用户个人资料页面。我无法将数据加载到html页面。我收到了以下错误：

Error: Cannot find a differ supporting object '[object Object]' of type '[object Object]'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (http://localhost:8100/build/vendor.js:45280:27)
    at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:12445:19)
    at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:13951:20)

人services.ts

export class PeopleServiceProvider {
loadUser(){
        return this.http.get('https://randomuser.me/api/?results=1')
                .map(res => res.json());
    }
}

profile.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { PeopleServiceProvider } from '../../providers/people-service/people-service';
export class ProfilePage {
    data:any = {};
    public form: FormGroup;
    public foundUser: {};

    loadUser(){
        this.peopleService.loadUser()
        .subscribe((res)=>{
            this.foundUser = res.results[0];
        });
    }

    ionViewDidLoad() {
        this.loadUser();
    }
}

profile.html

<ion-content padding class="background">
    <ion-card>
        <form [formGroup]="form" (ngSubmit)="saveEntry()">
            <ion-list *ngFor="let user of foundUser">
                <ion-item>
                    <ion-label floating>Name</ion-label>
                    <ion-input type="text" name="cust_name" formControlName="cust_name" value="{{user.name.last}}" ></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Username</ion-label>
                    <ion-input type="text" name="username" formControlName="username" [(ngModel)]="data.username"></ion-input>
                </ion-item>
            </ion-list>
            <button ion-button block outline color="light">Update</button>
    </ion-card>
</ion-content>

我对离子框架很新。我无法弄清楚这个问题。

Answer 1

更改 public foundUser：{};

到 public foundUser = [];

希望您的服务正在返回正确的数据。请你把服务的输出结果发布。

如何将数据呈现到html表单页面

1 个答案: