Angular中对象已初始化但字段仍被检测为undefined问题

在Angular项目中尝试获取User对象的phonenumber属性时，该属性被检测为undefined，但打印整个User对象时，该字段却明确显示有数据。

控制台日志 #

perfil.component.ts:42 undefined
perfil.component.ts:48 
{recordNumber: '00001A', name: 'Victor Manuel Arenas', dni: '75499109E', birthDate: '2000-12-04', phoneNumber: '678678678', …}
address
: 
"C\\Lorca 31"
birthDate
: 
"2000-12-04"
dni
: 
"75499109E"
email
: 
"victormanuel.arenas@univ.com"
name
: 
"Victor Manuel Arenas"
parking
: 
null
password
: 
"$2a$10$auBcwSsgKBWMTUUFToVb1OklqDP4O0LvW9F7vqWjnVZAGFzOVtfg6"
phoneNumber
: 
"678678678"
profilepic
: 
"profilepic_00001A.jpg"
recordNumber
: 
"00001A"
role
: 
"ALUMNO"

相关代码 #

检测方法 #

checking(){
    if(this.sesion.user != null){
      console.log(this.sesion.user.phonenumber);
      if(this.sesion.user.phonenumber === undefined) {
        alert("myProperty value is the special value `undefined`");
      }
    }
    
    console.log(this.sesion.user);
  }

User接口定义 #

import { Parking } from "./Parking";

export interface User {
    recordNumber: string;
    name: string;
    dni: string;
    birthdate: Date;
    phonenumber: string|null;
    email: string;
    address: string;
    profilepic: string|null;
    role: string;
    password: string;
    parking: Parking;
}

问题原因 #

JavaScript是大小写敏感的语言，你的代码和接口中使用的是全小写的phonenumber，但后端实际返回的字段是驼峰式的phoneNumber（首字母p小写，N大写），两者名称不匹配，导致访问this.sesion.user.phonenumber时找不到对应属性，返回undefined。

此外，接口中的birthdate和后端返回的birthDate也存在同样的大小写不一致问题。

解决方案 #

方案一：统一接口与后端字段名（推荐） #

修改User接口，将属性名调整为和后端返回一致的驼峰格式：

import { Parking } from "./Parking";

export interface User {
    recordNumber: string;
    name: string;
    dni: string;
    birthDate: Date; // 改为birthDate，匹配后端字段
    phoneNumber: string|null; // 改为phoneNumber，匹配后端字段
    email: string;
    address: string;
    profilepic: string|null;
    role: string;
    password: string;
    parking: Parking;
}

同时修改代码中的属性访问方式：

checking(){
    if(this.sesion.user != null){
      console.log(this.sesion.user.phoneNumber); // 改为phoneNumber
      if(this.sesion.user.phoneNumber === undefined) {
        alert("myProperty value is the special value `undefined`");
      }
    }
    
    console.log(this.sesion.user);
  }

方案二：字段映射（不推荐，仅临时应急） #

如果无法修改接口，可以在接收后端数据时手动映射字段：

// 假设从后端获取数据的方法中
fetchUser().subscribe(data => {
  this.sesion.user = {
    ...data,
    phonenumber: data.phoneNumber, // 映射字段
    birthdate: data.birthDate
  };
});

这种方式会增加维护成本，优先推荐方案一保持字段名一致。

内容的提问来源于stack exchange，提问作者Alexandru Cristian Iordache