Estoy realizando un sub-componente en el cual selecciono la fila de una tabla y muestro la información de la fila seleccionada, estoy usando Angular, en el archivo (componente padre) HTML tengo lo siguiente:
<ng-container matColumnDef="nameTnt">
<mat-header-cell *matHeaderCellDef mat-sort-header> Nombres </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.nameTnt}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef mat-sort-header> Acciones </mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-button color = "accent" [routerLink]="['view',row.idTnt]" >Ver Detalle</button>
</mat-cell>
</<ng-container>
En el archivo routing obtengo el path que selecciono en la tabla:
{path: 'tournament', component: TournamentComponent, children:[
{ path: 'view/:id', component: TournamentViewComponent }
]}
En el archivo TS (sub-componente) obtengo la información seleccionada y la almaceno de la siguiente manera:
tournamentSelect: tournament;
ngOnInit(): void {
this.route.params.subscribe(( params: Params) => {
this.id = params['id'];
this.dataTnt();
});
}
dataTnt(){
this.tournamentService.listById(this.id).subscribe( data => {
this.tournamentSelect = data;
});
}
La información almacenada en tournamentSelect es lo que necesito mostrar en el sub-compente, el HTML del sub-componente es el siguiente:
<mat-card class="card-title">
{{ tournamentSelect.nameTnt }}
</mat-card>
La información si se muestra en el navegador:
Sin embargo en la consola me genera este error:
La información que selecciono en la tabla se muestra en el navegador, no se cual puede ser el error que me genera en consola, no se porque da como propiedad indefinida, si todo se está definiendo en el TS, ¿Me podrían guiar cual puede ser mi equivocación?