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



我正在尝试更新用户配置文件页面。我无法将数据加载到 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)

People-Services.ts

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

个人资料

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();
    }
}

简介.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>

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

Change public foundUser: {};

公共发现用户= [];

希望您的服务返回正确的数据。您能否发布您的服务输出。

相关内容

  • 没有找到相关文章

最新更新