无法读取 Angular 2 中未定义的属性“用户名”

Question

为什么我在组件中定义了Cannot read property 'UserName' of undefined 的错误。在 html 代码中使用“elvis 运算符”并不能解决问题。请查看我在哪里出现此错误的代码：

user.model.ts

export class User {
    UserName: string;
    Password: string;
    Email: string;
    FirstName: string;
    LastName: string;
}

sign-up.component.ts

export class SignUpComponent implements OnInit {

  user: User;

  constructor() { }

  ngOnInit() {
  }

}

sign-up.component.html

<form class="col s12 white" #userRegistrationForm="ngForm">

<div class="row">
    <div class="input-field col s6">
        <input class="validate" type="text" name="UserName" #UserName="ngModel" [(ngModel)]="user.UserName" required  minlength="3">
        <label>Username</label>
    </div>

    <div class="input-field col s6">
    <input type="password" name="Password" #Password="ngModel" [(ngModel)]="user.Password"> 
    <label>Password</label>
    </div>
</div>

<div class="row">

</div>

</form>

使用 elvis 运算符： <input class="validate" type="text" name="UserName" #UserName="ngModel" [(ngModel)]="user?.UserName" required minlength="3">

Answer 1

尽管根据最佳实践，您不应该这样做

在你的model.ts中，你可以初始化属性。

        export class User 
      {
        UserName: string="";
        Password: string="";
        Email: string="";
        FirstName: string="";
        LastName: string="";
      }

最佳方法是将用户注入您的组件。

providers:[User]

constructor(private user:User);

作为先决条件，您应该将您的班级装饰为@Injectable()

Answer 2

在声明时您是新模特。

而不是

user: User;

写

user: User = new User();

在 Angular 中将变量声明为模型的最佳做法是在声明时新建变量，但有时除外。

Answer 3

你需要初始化用户对象，只需分配一个新的用户对象

user: User = new User();

Answer 4

看起来好像您正在使用export class User ...，您可以简单地使用user: User = new User();