无法读取未定义 angular 的 属性 'UserName' 2

Question

我尝试了很多解决方案，但 none 帮助我解决了这个问题... 无法弄清楚我的代码中有什么问题...

HTML 代码::

<input type="text" class="form-control"  placeholder="Please Enter Your Username" [(ngModel)]="currentUser.UserName" minlength="3" required id="userNameBox" name="UserName" #uName="ngModel">

组件代码::

    profile() {
        let uid = Number(sessionStorage.getItem('id'));
        this._homeService.profile(uid).subscribe(
            res => {
            this.currentUser = res

                console.log(this.currentUser);

});

服务::

profile(id: number) {

        return this._http.get(url, id).map(
            (res: Response) => {
                console.log(res.json())
                return new User(res.json()

                ) }
        ).catch(this.handleError);
    }

型号::

export class User {

constructor(json: any) {
    if (json != null) {
        this.Id = json.Id;
        this.UserName = json.UserName;
        this.FirstName = json.FirstName;
        this.LastName = json.LastName;
        this.Gender = json.Gender;
        this.Password = json.Password;
        this.Email = json.Email;
    }

}

Id: number = 0;
UserName: string = "";
FirstName: string = "";
LastName: string = "";
Gender: string = "";
Password: string = "";
Email: string = "";

}

Answer 1

因为你正在使用 [(ngModel)] :

你必须这样做，你不能将 safe operator ?与2 way data binding一起使用:

<div *ngIf="currentUser.UserName">
     <input type="text" class="form-control"  placeholder="Please Enter Your Username" [(ngModel)]="currentUser.UserName" minlength="3" required id="userNameBox" name="UserName" #uName="ngModel">
</div>

或

使用默认属性创建初始对象：

this.currentUser = { 
                        'UserName' : '',
                        'Email' : '',
                        // other properties , that you are using on template side 
                    }

这是第二种方法的工作演示 link：

https://stackblitz.com/edit/angular-initial-value