Angular使用map提取对象的validationTypeId等指定字段失败如何解决

根本原因 #

Array.map()是仅能用于数组类型的方法，而你提供的接口返回结构是单个对象，对非数组调用map方法会直接抛出类型错误，导致后续赋值逻辑中断，这是代码不生效的核心原因。

修复代码 #

直接对返回的单个对象做字段提取即可，无需调用map：

this.accessDService.getValidationDetails().subscribe((result) => {
  this.accessDValidationDetails = result;
  if (!result) return;
  // 直接解构提取目标字段
  const { validationTypeId, validationType } = result;
  this.validationD = { validationTypeId, validationType };
});

额外兼容方案 #

如果不确定接口返回的结构是否会发生变化，可添加类型判断同时兼容数组、单个对象两种场景：

this.accessDService.getValidationDetails().subscribe((result) => {
  this.accessDValidationDetails = result;
  if (!result) return;
  if (Array.isArray(result)) {
    // 数组场景沿用你原来的写法
    this.validationD = result.map(({ validationTypeId, validationType }) => ({ validationTypeId, validationType }));
  } else {
    // 单个对象场景直接提取字段
    const { validationTypeId, validationType } = result;
    this.validationD = { validationTypeId, validationType };
  }
});

内容的提问来源于stack exchange，提问作者Allison.A