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>