Angular2中部分条目无package字段时过滤器报错的解决问询

这个问题太常见了——当你的数据集合里混着没有package_detail字段的条目时，直接链式访问user.package_detail.package_id肯定会炸，因为user.package_detail可能是undefined，你再去读它的package_id自然就触发TypeError了。

给你两个实用的解决方案，按需选择：

方案1：用可选链操作符（最简洁） #

如果你的项目支持ES2020及以上语法，直接用?.就能搞定，它会在遇到null/undefined时自动终止访问，不会报错：

// 先安全检查package_detail和package_id是否存在
if(user?.package_detail?.package_id) {
  if(parseInt(user.package_detail.package_id) !== parseInt(filter[field])) {
    return false;
  }
}

方案2：逐层手动检查（兼容旧环境） #

要是项目还在用旧版JS/TS，那就老老实实逐层判断每一层是否存在：

// 先确认user.package_detail存在，再去访问package_id
if(user.package_detail && user.package_detail.package_id) {
  if(parseInt(user.package_detail.package_id) !== parseInt(filter[field])) {
    return false;
  }
}

额外提醒：别忘了处理无package信息的条目 #

你得想清楚：那些没有package_detail的条目，是要留在结果里还是过滤掉？举个完整的Pipe逻辑例子，假设我们要保留这些无package的条目，只过滤package_id不匹配的：

transform(items: any[], filter: {[key: string]: string}): any[] {
  return items.filter(user => {
    // 先拿到要过滤的字段名，根据你的实际代码调整
    const targetField = field; 
    // 如果没有package_detail或者对应的package_id，直接保留这条数据
    if (!user.package_detail || !user.package_detail[targetField]) {
      return true;
    }
    // 有有效package信息的情况下，判断是否匹配过滤条件
    return parseInt(user.package_detail[targetField]) === parseInt(filter[targetField]);
  });
}

这样修改后，不管数据里有没有package_detail字段，过滤器都能正常工作啦～

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