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