Angular中使用RxJS forkJoin合并流时出现property not found错误如何解决

问题原因 #

报错核心原因是concursos.find(c => c.id == oferta.concursoId)可能返回undefined：当存在Oferta的concursoId没有对应Concurso条目时，直接访问undefined.organismoId就会抛出属性不存在的错误。同时每次遍历Oferta都全量检索Concurso数组，数据量大时性能也较差。

解决方案 #

方案1：简单兼容（适合小数据量） #

增加空值判断逻辑，匹配不到对应Concurso时给默认值即可：

ofertasConOrganismos$ = forkJoin([
  this.ofertas$,
  this.concursos$
])
.pipe(
  map(([ofertas, concursos]) =>
    ofertas.map(oferta => ({
      ...oferta,
      // 可选链判断匹配结果，匹配不到默认赋值为null，可根据业务调整默认值
      organismoId: concursos.find(c => c.id == oferta.concursoId)?.organismoId ?? null
    }) as Oferta))
);

方案2：性能优化版（适合大数据量） #

先把Concurso数组转成ID为键的Map，避免每次循环都全量遍历数组：

ofertasConOrganismos$ = forkJoin([
  this.ofertas$,
  this.concursos$
])
.pipe(
  map(([ofertas, concursos]) => {
    // 预生成ID和organismoId的映射表
    const concursoMap = new Map(concursos.map(c => [c.id, c.organismoId]));
    return ofertas.map(oferta => ({
      ...oferta,
      organismoId: concursoMap.get(oferta.concursoId) ?? null
    }) as Oferta)
  })
);

如果是TypeScript编译时报错，可检查Oferta接口定义中organismoId是否为可选类型，调整默认值符合类型要求即可。

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