error al mostrar una variable – ERROR TypeError: “ctx.event.user is undefined”

publicado por: Anonymous

Estoy haciendo una pagina web con un frontend en Angular y un backend con Symfony, de momento estoy utilizando como servidor xampp.
Todo funcionaba de maravilla pero de repente, al iniciar el proyecto esta mañana me ha saltado un error por la consola del navegador

ERROR TypeError: “ctx.event.user is undefined”
EventDetailComponent_Template event-detail.component.html:2
Angular 23
RxJS 5
Angular 8
core.js:6189:19
Angular 15
RxJS 5
Angular 8

En cuanto al compilador de ng serve de Angular tambien

ERROR in
src/app/components/event-detail/event-detail.component.html:2:7 –
error TS2339: Property ‘user’ does not exist on type ‘Event’.>
2

{{event.user.name}}

src/app/components/event-detail/event-detail.component.ts:13:16
13 templateUrl: ‘./event-detail.component.html’,
Error occurs in the template of component EventDetailComponent.

El problema está en que el código funciona correctamente ya que uso exactamente lo mismo en otro componente y no tengo ningún fallo.
Como pone que no se encuentra la variable de event.user he decidido hacer una console.log(event) para ver si realmente no están llegando bien los datos, pero al verificarlo, todos los datos llegan correctamente pero es como si no los detectase.

Hace relativamente poco que he empezado a utilizar Angular y no se como seguir, estoy muy atascado ahora mismo.

Este es mi component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { UserService } from '../../services/user.service';
import { Event } from '../../models/event';
import { EventService } from '../../services/event.service';

import { ViewChild, ElementRef, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';


@Component({
  selector: 'app-event-detail',
  templateUrl: './event-detail.component.html',
  styleUrls: ['./event-detail.component.css'],
  providers: [UserService, EventService]
})
export class EventDetailComponent implements OnInit {
  public status;
  public identity;
  public token;
  public event: Event;


  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _userService: UserService,
    private _eventService: EventService,

  ) { 
    this.identity = this._userService.getIdentity();
    this.token = this._userService.getToken();
  }

  ngOnInit(): void {
    this.event = new Event(1, this.identity.sub, '', null, '', '', '','','', null, null);
    this.getEvento();

  }

  getEvento(){
    this._route.params.subscribe(params => {
      var id = +params['id'];

      this._eventService.getEvent(this.token, id).subscribe(
        response => {
          if(response.status == 'success') {
            this.event = response.event;
          }else{
            this._router.navigate(['/mis-eventos']);
          }
        },
        error => {
          console.log(error);
          this.status = error;

        }
      );
    });
  }           
}

Y en el component.html lo llamo poniendo

<p>{{event.user.name}}<p>

edit: Aqui dejo el console.log(response) donde se ve claramente que la variable que pone que no esta definida existe y tiene los datos que necesito. Se me ha olvidado mencionar que los datos se ven por pantalla, pero el error sigue saliendo.

Json de respuesta

solución

Suponiendo por el error que te da, en el ngOnInit cuando inicializas la variable event no estarás seteando la propiedad user o si que la seteas pero es undefined.

Hay dos soluciones:

  1. Setear la propiedad user en this.event como {}
ngOnInit(): void {
    // en la clase Event deberias crear la propiedad user sino la tienes
    this.event = new Event(1, this.identity.sub, '', null, '', '', '','','', null, null);
    this.event.user = {};
    this.getEvento();
}
  1. En la template usar el safe navigation operator de angular ?. Que comprueba si existe la propieda pues renderiza sino nada.
<p>{{event?.user?.name}}<p>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *