1

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

9
  • puedes hacer log de response en el subscribe?
    – hawks
    el 20 abr. 2020 a las 16:34
  • Property 'user' does not exist on type 'Event' es muy claro el mensaje, la propiedad user no existe en el tipo Event, verifica tu interfaz / modelo
    – Enzo
    el 20 abr. 2020 a las 16:43
  • Pero no tiene sentido porque si existe y los datos llegan correctamente. Además que uso exactamente el mismo método en otro componente y funciona todo.
    – Sr. Cocis
    el 20 abr. 2020 a las 16:49
  • @Sr.Cocis podés mostrar la definición de Event por favor. Por lo que veo está en '../../models/event'
    – Nery Ortez
    el 20 abr. 2020 a las 23:40
  • Hola, lo que puedo entender es al iniciar la por primera ves del lado del HTML esta intentando leer una variable que aun no esta definida en este caso event si existe pero lo siguiente es user que para el aun no existe esto lo puedes arreglas colocando esto (?) {{event?.user.name}} en una de las ultimas actualizaciones de typescript agregaron la función de poder hacer una validación de la propiedades de un objeto si existen o no agregando el signo ?. el 20 abr. 2020 a las 23:52

1 respuesta 1

0

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>
1
  • He hecho esto, y además he seteado el user como {} y se me han quitado los errores! Muchas gracias.
    – Sr. Cocis
    el 21 abr. 2020 a las 14:24

Tu Respuesta

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

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