Angular ERROR TypeError: Cannot read property 'isd_code' of null

Question

Component.ts

@Input() userProfile: any;
constructor(
    private formBuilder: FormBuilder,
  ) {}
ngOnInit() {
this.profile = this.formBuilder.group({
gender: [this.userProfile.gender],
      first_name: [this.userProfile.first_name, Validators.required],
      last_name: [this.userProfile.last_name, Validators.required],
      isd_code: [this.userProfile.phone_number.isd_code],
      phone_number: [this.userProfile.phone_number.phone_number],
})
}

userProfile 中 phone_number 和 child phone_number 和 isd_code 最初不可用。因此，当我尝试编辑个人资料页面时，出现错误

ERROR TypeError: Cannot read property 'isd_code' of null at profileEditComponent.ngOnInit

在html中我使用了安全导航运算符，但在这里我必须在formbuilder中设置值，否则即使设置了值验证也会失败。

我试图检查属性是否未定义，但它不起作用 this.userProfile.phone_number.isd_code != undefined。

Answer 1

对打字稿使用安全导航运算符?或三元运算符

这样试试：

this.userProfile?.phone_number?.isd_code != undefined

在 TS 中：

isd_code: [(this.userProfile)?(this.userProfile.phone_number ? this.userProfile.phone_number.isd_code : null) : null],

Answer 2

为什么不用空对象初始化它。

@Input() userProfile: any= new UserProfile();

并在 UserProfile 中确保您已使用空对象对 phone_number 进行了 intizalized。

Answer 3

这种情况下的问题可能是 this.userProfile.phone_number 的值为 null 而您正试图访问一个元素的属性空值。在尝试访问属性之前，您应该检查 this.userProfile.phone_number 的值：

this.profile = this.formBuilder.group({
            gender: [this.userProfile.gender],
            first_name: [this.userProfile.first_name, Validators.required],
            last_name: [this.userProfile.last_name, Validators.required],
            isd_code: [this.userProfile.phone_number ? this.userProfile.phone_number.isd_code : ''],
            phone_number: [this.userProfile.phone_number ? this.userProfile.phone_number.phone_number : '']
})

Angular ERROR TypeError: Cannot read property 'isd_code' of null

Angular ERROR TypeError: Cannot read property 'isd_code' of null

formbuilder

angular

Component.ts