如何在 angular 材料表中检索选定行的值

Question

I am a beginner,I have a mat-table :

<table mat-table [dataSource]="list_equipment" matSort style="width: 100%;"> 
    <!-- id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef style="text-align: center !important;" mat-sort-header> id </th>
      <td mat-cell *matCellDef="let list_equipment" style="text-align: center;"> {{list_equipment.id}} </td>
    </ng-container>
     <!-- CaptionCode Column -->
     <ng-container matColumnDef="Caption">
      <th mat-header-cell *matHeaderCellDef style="text-align: center !important;" mat-sort-header> caption</th>
      <td mat-cell *matCellDef="let list_equipment" style="text-align: center;"> {{list_equipment.Caption}} </td>
    </ng-container>
    ...
    <tr mat-header-row *matHeaderRowDef="displayedColumnsequipment"></tr>
    <!-- <tr mat-row *matRowDef="let row; columns: displayedColumnsequipment;" (click)="highlight(row)" [ngClass]="{'highlightTableColor': selectedRowIndex == row.position}"></tr> -->
    <tr mat-row class="table-row" tabindex="1" *matRowDef="let row; columns: displayedColumnsequipment;"  (click)="highlight(row)"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>

In TypeScript I write below code:

highlight(row){
  this.selectedRow=row;
  console.log(this.selectedRow); 
}

The problem is that wherever I use the {{selectedRow.id}} in html code, it gives this error in console: Cannot read property 'id' of undefined

Answer 1

you are defining the value which is not initialized so you have to set the value as "Safe Navigation Operator" "?"

                 {{selectedRow.id}} to {{selectedRow?.id}}

so this condition will not break your code and will not give you undefined or null value.