2

tengo un problema en angular que basicamente, la vista carga los datos del html mas rapido que los que me genera el .ts y me salta un undefined. Aqui mi vista.

EditComponent.html

<div class="update text-center text-light">
    <h1>Modificar Juego</h1>
    <table class="table table-light">
        <tbody>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.nombre" [value]="juegoBase.nombre" name="nombre" type="text"
                            placeholder="Ingrese el nombre">
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.descripcion" name="descipcion" type="text"
                            placeholder="Ingrese la nueva descripcion" />
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.precio" name="precio" type="number"
                            placeholder="Ingrese el precio" />
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.descuento" name="descuento" type="text"
                            placeholder="Ingrese el descuento" />
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.genero" name="genero" type="text"
                            placeholder="Ingrese el genero" />
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <input matInput [(ngModel)]="editJuego.nota" name="nota" type="text"
                            placeholder="Ingrese la nota" />
                    </mat-form-field>
                </td>
            </tr>
            <tr>
                <td>
                    <form>
                        <div class="form-group">
                            <input type="file" [(ngModel)]="editJuego.foto" name="foto" class="form-control-file"
                                id="exampleFormControlFile1">
                        </div>
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <mat-form-field>
                        <mat-select [(ngModel)]="editJuego.plataformas">
                          <mat-option *ngFor="let plataforma of getPlataformas()" [value]="plataformas" >
                            {{plataforma.nombre}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                </td>
            </tr>
        </tbody>
    </table>
    <button mat-raised-button (click)="edit()">Editar Juego</button>
</div>

EditComponent.ts

import { MatSnackBar } from '@angular/material/snack-bar';
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Videojuego } from 'src/app/Models/videojuego';
import { ActivatedRoute, Router } from '@angular/router';
import { stringify } from 'querystring';
import { Plataforma } from 'src/app/Models/plataforma';
import { VideojuegoService } from 'src/app/services/juego.service';
import { PlataformaService } from 'src/app/services/plataforma.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
  editJuego: Videojuego = new Videojuego();
  plataformas: Plataforma[];
  juegoBase: Videojuego;
  id: number;
  form:FormGroup;
  constructor(private route: ActivatedRoute, 
    private service: VideojuegoService,
     private juego: Videojuego,
      private snackBar: MatSnackBar, 
      private router: Router, 
      private plataService: PlataformaService,
      private cdRef: ChangeDetectorRef) { 
        this.service.getJuego(+this.route.snapshot.paramMap.get('id')).subscribe(
          data => {
            this.juegoBase = data;
            console.log(this.juegoBase);
          }
        )
        }

  ngOnInit(): void {
    this.plataService.getPlataformas().subscribe(data => { this.plataformas = data });


    this.route.params.subscribe(
      params => {
        this.editJuego = {
          id: params['id'],
          nombre: params['nombre'],
          descripcion: params['descripcion'],
          precio: params['precio'],
          descuento: params['descuento'],
          genero: params['genero'],
          nota: params['nota'],
          comentario: params['comentario'],
          foto: params['foto'],
          plataformas: params['plataformas']
        }
      }
    );


  }

  edit() {
    this.editJuego.comentario = null;
    this.juego = this.editJuego;

    this.service.editJuego(this.juego).subscribe(
      data => {
        this.openSnackBar("Se ha modificado correctamente", "ACEPTAR");
      },
      error => {
        this.openSnackBar("Error ID NO EXISTENTE", "ACEPTAR");
      },
      () => this.router.navigateByUrl("home", { queryParams: this.editJuego, skipLocationChange: true })
    )
  }
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 1000,
    });
  }

  getPlataformas() {
    return this.plataformas;
  } 

}

Error que me lanza el navegador.

core.js:6228 ERROR TypeError: Cannot read property 'nombre' of undefined at EditComponent_Template (edit.component.html:8) at executeTemplate (core.js:12156) at refreshView (core.js:11995) at refreshComponent (core.js:13445) at refreshChildComponents (core.js:11716) at refreshView (core.js:12051) at refreshEmbeddedViews (core.js:13391) at refreshView (core.js:12022) at refreshComponent (core.js:13445) at refreshChildComponents (core.js:11716)

Lo que me pinta el console log generado en el constructor del .ts

{id: 6, nombre: "Apex Legens", descripcion: "Apex Legends es el nuevo battle royale free to pla…tra 60 jugadores por ver quién se alza victorioso", precio: 0, descuento: 0, …}

Funciona bien pero en la vista en los mat-form-field no aparecen los datos que deberian, se deberia de mostrar en el primero en el input del nombre del html pero indica que esta indefinido. Gracias de antemano

1
  • Recuerda marcar como correcta si alguna respuesta te ayudó, esto sirve para que otros desarrolladores se guíen con tu pregunta y las respuestas. Commented el 11 jun. 2020 a las 15:54

4 respuestas 4

0

Proba agregar el async-await a la funcion ngOnInit, porque estas haciendo una llamada a una base de datos y eso es asincronico, el await hace que el código se detenga hasta que tengas los datos que pediste y después continúe. También podes usar events pero creo que en este caso simple el await va a funcionar

async ngOnInit(): void {
    await this.plataService.getPlataformas().subscribe(data => { this.plataformas = data });


    this.route.params.subscribe(
      params => {
        this.editJuego = {
          id: params['id'],
          nombre: params['nombre'],
          descripcion: params['descripcion'],
          precio: params['precio'],
          descuento: params['descuento'],
          genero: params['genero'],
          nota: params['nota'],
          comentario: params['comentario'],
          foto: params['foto'],
          plataformas: params['plataformas']
        }
      }
    );


  }

Te dejo el cambio por acá espero te sirva.

2
  • Gracias por la respuesta pero no me funciona,pero con la respuesta que me dieron mas abajo me funcionó. Un saludo Commented el 11 jun. 2020 a las 11:45
  • No funciona porque el mismo core de Angular sólo invoca a ngOnInit. Aunque este método devuelva una Promise<>, el core no va a "awaitearla"; es decir, va a hacer el render potencialmente antes de que la Promise<> de ngOnInit se resuelva.
    – VRoxa
    Commented el 15 jun. 2020 a las 15:29
0

Haz el render del HTML hasta que tu variable editJuego ya este seteada.

<div class="update text-center text-light" *ngIf="editJuego">
    <h1>Modificar Juego</h1>
    <table class="table table-light">
    ...

Con eso previenes los errores de undefined

0

Puedes usar *ngIf


<div class="update text-center text-light">
    <h1>Modificar Juego</h1>
    <table 
        *ngIf="juegoBase; else templatePrecarga"
        class="table table-light">
        <tbody>
  //..Mas codigo

Mas abajo, en el html


<ng-container #templatePrecarga >

  ...Cargando...

</ng-containter>

Mientras juego base este null o undefined, <table> y todo su contenido no se renderizara, en cambio se mostrará el template de carga.

1
  • Gracias era esto. Commented el 11 jun. 2020 a las 11:44
0

Bueno tienes 3 probables caminos:

1.- Utiliza *ngIf en tu componente para que muestre la información solo si está existe, es decir, que hasta que traiga la información del backend aparecerá en tu componente.

2.- Utiliza async await para esperar la información de tu consulta OJO: Si estás usando más cosas por mostrar no las mostrará hasta que haya la función del async await.

3.- Pon la carga de información en el ngOnInit y en el constructor solo asigna el id. El constructor es lo primero que carga por ello te recomiendo eso, todo lo que sea que traigas de información del backend asignalo en el ngOnInit y no en el constructor.

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.