Cuando mi componente Angular HTML se procesa. Obtendré muchos errores que se ven así
ERROR TypeError: no se pueden leer las propiedades de undefined (leyendo 'someProperty')
En mi página HTML, tengo muchos enlaces que se ven así
<h1>{{event.title.toUpperCase()}}</h1>En la mayoría de los componentes, llamo a un servicio para obtener datos de mi controlador en 'ngOnInit ()' y sé que una solución para evitar este error antes de que los datos regresen de mi controlador es hacer que la propiedad sea anulable de esta manera
event?.titlepero esto no parece una solución práctica, especialmente si tengo docenas en la página.
Lo que he probado -
PREGUNTA: ¿Cuál es la mejor solución para manejar esto y no seguir recibiendo estos errores hasta que se carguen los datos de mi página?
¿Debo tener algún condicional como *ngIf="event" y ocultar la página hasta que se reciban los datos y mostrar algún indicador de carga mientras espero? ¿O hay alguna forma de evitar que estos errores se muestren en la consola?
EDITAR: aquí está el código que uso para obtener datos del controlador y configurarlo en 'evento'
// component event: any; // ngOnInit() this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => { this.event = response; }, error => { console.log(error); }); // service getEvent(id: number): Observable <any> { return this.http.get<any>(this.baseUrl + 'events/' + id); }Definir una variable booleana y comprobar si se han cargado datos es el mejor enfoque:
// component event: any; loaded: boolean; // ngOnInit() this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => { this.event = response; this.loaded = true; }, error => { console.log(error); });En su página HTML, coloque sus etiquetas HTML dentro de una sección o una etiqueta div de la siguiente manera:
<section *ngIf="loaded"> // your HTML tags here </section>De esta manera, no seguirá recibiendo errores indefinidos y los enlaces se producirán solo cuando los datos estén realmente cargados. ¡Eso es todo!
Envolvería tu html afectado en algo como
<ng-container *ngIf="event"> ... </ng-container>Al leer su descripción, también sugiero usar el observable que es su llamada http como un enlace asíncrono en su plantilla en lugar de asignarlo a un "evento" de objeto concreto.
Para brindarle más información al respecto, sin embargo, se requiere más código de su parte. [EDITAR] Su JS:
// class member event$: Observable<any> = of(undefined); // whereever this.event$ = this.eventService.getEvent(this.id).pipe(take(1), catchError(error => { console.log(error); //or return something else return throwError(error); }));Enlace en HTML:
<ng-container *ngIf="(event$ | async) as event"> ... </ng-container>[/EDITAR]