0

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: card infor

Sin embargo en la consola me genera este error: error en consola

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?

1 respuesta 1

0

Entiendo que tournamentService.listById debe ser un proceso asíncrono. Esto hace que en el primer renderizado del componente, como este proceso no se ha completado todavía, la propiedad tournamentSelect no se ha asignado y por tanto es undefined.

Se me ocurren dos soluciones:

1- envolverlo en un ng-container para que solo renderice la tarjeta cuando tournamentSelect este asignado:

<ng-container *ngIf="tournamentSelect">
  <mat-card class="card-title"> 
    {{ tournamentSelect.nameTnt }}
  </mat-card>
</ng-container>

2- usar el optional chaining (?.) para chequear si tournamentSelect está definido antes de intentar acceder a su propiedad nameInt

<mat-card class="card-title"> 
  {{ tournamentSelect?.nameTnt }} // <-----
</mat-card>

un saludo

1
  • Gracias por tu ayuda, con ambas opciones soluciona el error, excelente solución GRACIAS.... Commented el 27 sept. 2022 a las 22:17

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.