Estoy tratando de obtener un registro por su id pero obtengo un TypeError. Este es mi código:
export class LogComponent implements OnInit { id!: number; logs!: Log[]; log!: string constructor(private logService: LogService) { } public show: boolean = false; public buttonName: any = 'Load message'; ngOnInit() { this.logService.getLogs().subscribe((data: Log[]) => { console.log(data) this.logs = data }) } showLog() { this.show = !this.show; this.logService.getLogById(this.id).subscribe((data: Log) => { console.log(data) // @ts-ignore this.log = data; if (this.show) this.buttonName = "Hide"; else this.buttonName = "Load message"; }) } }Y este es mi componente de servicio:
getLogById(id:number): Observable<Log> { // @ts-ignore return this.http.get<Log>(`${this.API}/${id}`).pipe(catchError(this.handleError )); } private handleError(httpErrorResponse:HttpErrorResponse){ if(httpErrorResponse.error instanceof ErrorEvent){ console.error(httpErrorResponse.error.message) }El error que me sale es:
TypeError: You provided 'undefined' where a stream was expected. GET http://localhost:8081/logs/undefinedEl error muestra el Id como indefinido. ¿alguna solución?
Mi opinión sobre esto es que el problema ocurre porque no devuelves nada de catchError .
El ID de registro que está proporcionando a su método de servicio probablemente no esté undefined como se ve en el registro de su consola GET http://localhost:8081/logs/undefined y su backend devuelve un error porque no puede encontrar el registro con ID undefined y el catchError dispara en este caso.
Puede devolver un objeto null o vacío cuando su backend arroja un error:
private handleError(httpErrorResponse:HttpErrorResponse){ if(httpErrorResponse.error instanceof ErrorEvent){ console.error(httpErrorResponse.error.message) } return of(null); // or return of({} as Log); } Si comienza a obtener errores de tipo porque se supone que su método de servicio solo devolverá una instancia de Log (comprobaciones nulas estrictas), entonces puede cambiar el tipo del valor de retorno:
getLogById(id:number): Observable<Log | null> Y asegúrese de ajustar el código que llama a este método también, para tener en cuenta el hecho de que ahora el registro devuelto puede ser null .