Angular中已定义User仍报Cannot read property 'UserName' of undefined错误求助

嘿，这问题我熟！你遇到的核心问题其实很简单——你只是给user变量声明了User类型，但从来没真正创建过一个User实例。

问题根源 #

在你的sign-up.component.ts里，user: User;这行代码只是告诉TypeScript：“这个变量以后应该是个User类型的对象”，但它初始值是undefined。当你的模板试图访问user.UserName时，本质上是在访问undefined.UserName，自然会抛出错误。

至于你说的Elvis运算符（?.）没用，大概率是因为你在做双向绑定（比如[(ngModel)]="user.UserName"）。?.只能安全读取属性，但双向绑定需要给属性赋值——你总不能给undefined的属性赋值吧？这时候?.就帮不上忙了。

解决方案：实例化User对象 #

只需要在组件里给user创建一个实际的User实例就行，有两种常见方式：

1. 直接在声明时初始化：

export class SignUpComponent implements OnInit {
  // 直接new一个User实例，初始值都是undefined但对象本身存在
  user: User = new User(); 
  constructor() { }
  ngOnInit() { }
}

2. 在ngOnInit里初始化：

export class SignUpComponent implements OnInit {
  user: User;
  constructor() { }
  ngOnInit() { 
    this.user = new User();
  }
}

这样一来，user就不再是undefined了，模板里访问user.UserName（不管是单向显示还是双向绑定）都不会报错。如果只是单向显示数据，user?.UserName也能正常工作，但实例化对象是更稳妥的做法，尤其是在表单场景下。

内容的提问来源于stack exchange，提问作者stack questions