javascript - Ionic 3 - 数据加载后 ngModel 未定义

Question

我是 angular 4 的新手...在过去的几个月里尝试搜索了很多次，但没有结果，尽管这看起来是最简单的事情。

这是一个 ionic 应用程序。用户登录，整个用户对象被保存到localStorage。尝试了几个插件，但使用了简单的插件:

window.localStorage.setItem('User', JSON.stringify(user));

用户对象结构:

export class User {
constructor(
    public token?: string,
    public user_email?: string,
    public email?: string,
    public first_name?: string,
    public last_name?: string,
    public user_roles?: {
        ID?: number,
        caps?: {
            administrator?: boolean,
        },
        roles?: object,
    },
    public id?: number,
    public device_feedback?: boolean,
    public role?: string,
    public username?: string,
    public billing?: Address,
    public shipping?: Address
) {}
}

export class Address {
    first_name?: string;
    last_name?: string;
    company?: string;
    address_1?: string;
    address_2?: string;
    city?: string;
    state?: string;
    postcode?: string;
    country?: string;
    email?: string;
    phone?: number   
}

settings.ts:(我已经添加了 ngOnInit 和 this.platform.ready(){} 因为思想数据还没有准备好或其他...)

export class Settings implements OnInit{
 [other vars]

 user: User;

 constructor(public storage: Storage, private platform: Platform) { }

ngOnInit() {
    // this.storage.ready().then(() => {
    // this.storage.get("User").then((data) => {
    this.platform.ready().then(() => {
        let data = window.localStorage.getItem('User');
        if (data) {
            this.user = JSON.parse(data);
            this.email = this.user.user_email;
            console.log('user', this.user);
            console.log('this.user.user_email', this.user.user_email);

        }
    });
}

Settings.html

<ion-content>
<ion-list padding>
    <ion-list-header>
        Title
    </ion-list-header>
    <ion-item>
        <ion-label color="primary" fixed>Email</ion-label>
        <ion-input class="in" type="email" [(ngModel)]="user.user_email" disabled="true"></ion-input>
    </ion-item>

user_email 显示在 console.log 中，引用为 this.user.user_email 并且同一属性在 HTML 中给出错误...这怎么可能？在浏览器或设备中相同:http://prntscr.com/i8rfhg我也尝试过 user: any，但得到了相同的结果......

如何？为什么？我错过了什么？

这是 ionic 信息:

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

全局包:

cordova (Cordova CLI) : 7.1.0

本地包:

@ionic/app-scripts : 1.3.0
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.0.1

系统:

Android SDK Tools : 25.2.5
Node              : v6.11.0
npm               : 5.6.0

非常感谢!

Answer 1

您正在尝试访问您的用户对象的属性 user_email，当它为 null 时/在它被初始化之前。

尝试:

user: User = {}; // initial value

或者:

<ion-list padding *ngIf="user">
    <ion-list-header>
        Title
    </ion-list-header>
    <ion-item>
        <ion-label color="primary" fixed>Email</ion-label>
        <ion-input class="in" type="email" [(ngModel)]="user.user_email" disabled="true"></ion-input>
    </ion-item>