Question

为什么我在组件中定义错误时会继续出现Cannot read property 'UserName' of undefined错误。使用＆＃39; elvis运算符＆＃39;在HTML代码中没有做到这一点。请查看我收到此错误的代码：

user.model.ts

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

登录-up.component.ts

export class SignUpComponent implements OnInit {

  user: User;

  constructor() { }

  ngOnInit() {
  }

}

登录-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

您需要初始化用户对象，只需指定一个新的用户对象

user: User = new User();

Answer 2

如果您使用的是export class User ...，您可以执行user: User = new User();

Answer 3

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

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

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

providers:[User]

constructor(private user:User);

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

Answer 4

在角度2+中，你必须import你export ...的班级所以 - 您必须导入用户和
然后初始化user:User=new User();

Answer 5

宣布时的新模型。

而不是

user: User;

<强>写

user: User = new User();

声明变量作为角度模型的最佳做法是在声明时声明新变量，除非有时。

无法读取属性＆＃39; UserName＆＃39;在Angular 2中未定义

5 个答案: