0

En este proyecto: https://stackblitz.com/edit/angular-ivy-byvfjy?file=src/app/avales/filtro-avales/filtro-avales.component.ts

En el componente filtro-avales.component.ts

mapeo una serie de propiedades en función de lo que encuentro en una serie de observables previamente obtenidos

 avalesConPropiedadesMapeadas$ = forkJoin([
  this.avales$,
  this.tipoAvales$,
  this.estadoAvales$,
  this.avalistas$,
  this.responsables$,
  this.proyectos$,
  this.oferta$

])
.pipe(
  map(([avales, tipoAvales, estadoAvales, avalistas, responsables, proyectos, ofertas]) =>
    avales.map(aval => ({
      ...aval,
      tipoAval: tipoAvales.find(t => t.id == aval.tipoAvalId),
      estadoAval: estadoAvales.find(t => t.id == aval.estadoAvalId),
      avalista: avalistas.find(t => t.id == aval.avalistaId),
      responsableNombre: responsables.find(r => r.id == aval.responsableId).nombreCompleto,
      clienteId: proyectos.find(p => p.id == aval.proyectoId)?.clienteId,
      clienteNombre: proyectos.find(p => p.id == aval.proyectoId)?.clienteNombre,
      proyectoDescripcion: proyectos.find(p => p.id == aval.proyectoId)?.descripcion,
      ofertaDescripcion:ofertas.find(o=>o.id==aval.ofertaId)?.descripcion
    }) as Aval))
 );

Esto mismo cuando lo intento hacer en mi proyecto en local VS Code me marca estos errores al compilar

errores

No entiendo la razón y no se si está relacionado con las versiones de Typescript u otras

Alguna idea, por favor?

Salu2

2
  • Que versión de angular usas? y al posicionar el mouse en cualquiera de los find que te señala en rojo que mensaje te sale?
    – jGomez
    Commented el 10 feb. 2022 a las 15:12
  • @jGomez @angular/core": "~13.1.2" y al poner el mouse en cualquiera de los find me dice: No se puede llamar a esta expresión. Cada miembro del tipo de unión "{ <S extends Proyecto>(predicate: (this: void, value: Proyecto, index: number, obj: Proyecto[]) => value is S, thisArg?: any): S; (predicate: (value: Proyecto, index: number, obj: Proyecto[]) => unknown, thisArg?: any): Proyecto; } | { ...; } | { ...; } | { ...; }" tiene signaturas, pero ninguna de ellas es compatible entre sí.
    – kintela
    Commented el 11 feb. 2022 a las 10:20

2 respuestas 2

1

Validando lo que posees, puede que el error que presentas es porque en el angular, los parametros que tienes los está tratando como parámetros de tipo any, puedes probar hacer lo siguiente.

avalesConPropiedadesMapeadas$ = forkJoin([
  this.avales$,
  this.tipoAvales$,
  this.estadoAvales$,
  this.avalistas$,
  this.responsables$,
  this.proyectos$,
  this.oferta$
])
.pipe(
  map(([avales, tipoAvales, estadoAvales, avalistas, responsables, 
    proyectos, ofertas]) =>
    avales.map(aval => ({
    ...aval,
      tipoAval: (tipoAvales as TipoAval[]).find(t => t.id == aval.tipoAvalId),
      estadoAval: (estadoAvales as EstadoAval[]).find(t => t.id == aval.estadoAvalId),
      avalista: (avalistas as Avalista[]).find(t => t.id == aval.avalistaId),
      responsableNombre: (responsables as Responsable[]).find(r => r.id == aval.responsableId).nombreCompleto,
      clienteId: (proyectos as Proyecto[]).find(p => p.id == aval.proyectoId)?.clienteId,
      clienteNombre: (proyectos as Proyecto[]).find(p => p.id == aval.proyectoId)?.clienteNombre,
      proyectoDescripcion: (proyectos as Proyecto[]).find(p => p.id == aval.proyectoId)?.descripcion,
      ofertaDescripcion: (ofertas as Oferta[]).find(o=>o.id==aval.ofertaId)?.descripcion
    }) as Aval))
 );

Si esto no ste sirve, avisas para probar otra cosa,

Saludos.

0

Tiene su origen en la Union de tipos invocables para diferentes tipos de array Aunque en mi proyecto con typescript 4.3.5 la unica modificacion respecto al tuyo es si uso strict:true debo usar Non-null assertion operator tambien el uso de as unknown cuando es intencionado

let avalesConPropiedadesMapeadas$:
    Observable<(Aval | TipoAval | EstadoAval | Avalista | Responsable | Proyecto)[]>= forkJoin([
      of(avales),
      this.tipoAvales$,
      this.estadoAvales$,
      this.avalistas$,
      this.responsables$,
      this.proyectos$
    ])
      .pipe(
        map
        (
          (
            [avales, tipoAvales, estadoAvales, avalistas, responsables, proyectos]
          )  :(Aval|TipoAval |EstadoAval |Avalista |Responsable |Proyecto)[] =>
          avales.map(
            (aval:Aval) => ({
            ...aval,
            tipoAval: tipoAvales.find(t => t.id == aval.tipoAvalId)!.nombre,
            estadoAval: estadoAvales.find(t => t.id == aval.estadoAvalId)!.nombre,
            avalista: avalistas.find(t => t.id == aval.avalistaId)!.nombre,
            responsableNombre:responsables.find(r => r.id == aval.responsableId)!.nombreCompleto,
            clienteId:proyectos.find(p=>p.id==aval.proyectoId)?.clienteId,
            clienteNombre:proyectos.find(p=>p.id==aval.proyectoId)?.clienteNombre
          }) as unknown as Aval))
      );

      avalesConPropiedadesMapeadas$
      .subscribe(
        data => {
          this.dataSource= data as Aval[];
        }
        , err => console.log(err)
        , () => {
          console.log('dataSource tras filtrar por proyecto', this.dataSource);
        }
      );
  }

Considerar el modelo de datos ya que la desestructuracion puede dar con find() resultados no deseados al asignar undefined a una propiedad

En el ejemplo trate de repetir la logica de la pregunta con dos arrays de objetos modificando una propiedad del array peces de acuerdo a si se cumple una condicion relacionada con el otro array pajaros pero si el primer array peces cuenta con varios objetos el resultado no sera el deseado si contara solo con uno que cumpliera la condicion si se obtendria lo deseado

interface Bird {
    name:string;
    plumas:string | undefined
  }
  
  interface Fish {
     name:string
     aletas: string | undefined
  
  }
  const peces:Fish[]=[{name:'pedro',aletas:'rojas'},{name:'pepito',aletas:'rojas'}]
  const pajaros:Bird[]=[{name:'pep',plumas:'amarillas'},{name:'pepito',plumas:'amarillas'}]
  function mapear ({ peces, pajaros }: { peces: Fish[]; pajaros: Bird[] }):(Bird|Fish)[]{
  return peces.map(pe=>(
                  {
                   ...pe,
                   aletas: pajaros.find(pa =>
                   { return pa.name === pe.name}
                    )?.plumas
                  } 
                     ) as unknown as Bird
                     )
  }
console.log(mapear({ peces, pajaros }))

// muestra
{ name: 'pedro', aletas: undefined },  
 
 { name: 'pepito', aletas: 'amarillas' }

La alertas son adecuadas pues puede aignarse a una propiedad un valor undefined pese a que nosotros le estamos diciendo que no lo haremos Fijate en el ejemplo con los peces y pajaros si peces tiene a un solo miembro el cual ademas tiene el mismo nombre que un pajaro se modificara el color de la aleta del pez por el color de la pluma del pajaro que tiene el mismo nombre y listo! Pero si peces tiene mas de un objeto daremos el valor undefined para los que no tienen el mismo nombre.

Para evitar esto agrego una funcion que maneje al objeto cuando sea undefined

interface Bird {
  name: string;
  plumas: string
}

interface Fish {
  name: string
  aletas: string

}

const peces: Fish[] = [{ name: 'maria', aletas: 'naranjas' }, { name: 'pedro', aletas: 'rojas' }, { name: 'pepito', aletas: 'rojas' }]
const pajaros: Bird[] = [{ name: 'pep', plumas: 'amarillas' }, { name: 'pepito', plumas: 'amarillas' }]
function mapear({ peces, pajaros }: { peces: Fish[]; pajaros: Bird[] }): (Bird | Fish)[] {
  return peces.map(pe => (
    {
      ...pe,
      aletas: encontrarColor(pe, pajaros)

    }
  ) as unknown as Bird
  )
}
console.log(mapear({ peces, pajaros }))

function encontrarColor(pe: Fish, pajaros: Bird[]): string {
  let encontrado = pajaros.find(pa =>
    pa.name === pe.name
  )
  let u = (encontrado !== undefined) ? encontrado.plumas : pe.aletas;
  return u

}

En el resultado que muestra se verfifica que no modificamos ninguna propiedad por un valor undefined El que nos indique el compilador un posible objeto undefined es de mucha utilidad para tomar los recaudos para que esto no ocurra

 npx ts-node tesy.ts
[
  { name: 'maria', aletas: 'naranjas' },
  { name: 'pedro', aletas: 'rojas' },
  { name: 'pepito', aletas: 'amarillas' }
]

tambien podes encadenar por ejemplo de esta forma

find(p=>p.id==aval?.proyectoId)?.clienteNombre y hay tambien muchas mas formas para que no se queje

pero hay que tener recaudos como mencione antes para manejar un posible undefined pues nos alerta que si puede ocurrir de acuerdo a nuestro codigo

How to solve TypeScript possibly undefined value

2
  • en mi proyecto local añadiendo lo que comentas me sigue marcando error en los métodos find, pero solo cuando añado this.ofertas$ al final, es lo curioso con las otras 6 propiedades mapeadas no se queja
    – kintela
    Commented el 14 feb. 2022 a las 7:52
  • 1
    En realidad la alerta es adecuada pues puede aignarse a una propiedad un valor undefined fijate en el ejemplo con los peces y pajaros si peces tiene a un solo miembro el cual ademas tiene el mismo nombre que un pajaro se modificara el color de la aleta del pez por el color de la pluma del pajaro que tiene el mismo nombre y listo! pero si peces tiene mas de un objeto daremos el valor undefined para los que no tienen el mismo nombre.Para evitar estola agrego una funcion que maneje al objeto cuando sea undefined te la agrego a la respuesta
    – nestdan
    Commented el 14 feb. 2022 a las 15:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.