Angular2中如何检查响应对象内是否存在指定键？

嘿，针对你在Angular 2里检查响应对象是否存在某个键的需求，这里有几种实用的方法，结合你的登录请求代码给你演示：

方法1：使用in操作符 #

这是JavaScript里检查对象属性存在性最直接的方式，它会检查对象及其原型链上的属性是否存在。结合你的代码，你可以这样修改逻辑：

submitPost() {
  this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
    data => {
      this.responseStatus = data;
      // 先检查status键是否存在，避免访问不存在的属性报错
      if ('status' in this.responseStatus) {
        if(this.responseStatus.status === 1) {
          this.router.navigate(['admin/dashboard'])
        } else {
          // 检查message键是否存在，优先使用接口返回的错误信息
          const errorMessage = 'message' in this.responseStatus 
            ? this.responseStatus.message 
            : 'Login Error';
          alert(errorMessage);
        }
      } else {
        alert('收到异常响应格式，请检查接口');
      }
    },
    err => { 
      console.log(err);
      // 处理HTTP请求级别的错误，同样可以检查响应体里的键
      if (err.error && 'message' in err.error) {
        alert(`请求错误：${err.error.message}`);
      } else {
        alert('网络请求失败，请稍后重试');
      }
    },
    () => {}
  );
  this.status = true;
}

方法2：使用hasOwnProperty()方法 #

如果你想确保检查的是对象自身拥有的属性（排除原型链上继承的属性），可以用这个方法，它比in操作符更严谨：

// 示例：检查responseStatus是否自身拥有message键
if (this.responseStatus.hasOwnProperty('message')) {
  alert(this.responseStatus.message);
} else {
  alert('Login Error');
}

方法3：可选链操作符（?.，适用于较新版本Angular） #

如果你的项目后续升级到了支持ES2020的Angular版本（比如Angular 10及以上），可以用可选链来安全访问属性，同时间接判断键是否存在：

// 如果message键存在就赋值，否则用默认值
const errorMessage = this.responseStatus?.message ?? 'Login Error';
alert(errorMessage);

小提示 #

在处理接口响应时，建议先对响应数据做类型定义（比如创建一个LoginResponse接口），这样不仅能获得TypeScript的类型提示，还能提前约束响应结构，减少运行时错误：

interface LoginResponse {
  status: number;
  message?: string; // 可选属性，用?标记
}

// 在subscribe里指定类型
data: LoginResponse => {
  // ...你的逻辑
}

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