Nos meus estudos, possuo uma lista de clientes onde desejo atualizar os seus dados quando clicar no botão de atualizar. Porém tenho encontrado problema que tenho recebido UNDEFINED ao invés do ID do cliente que cliquei. O que estaria de errado no meu código?
list-cliente.component
editar(id: any) {
console.log(id); //verificando oq recebi
this.router.navigate(['editar', id]);
}
list-cliente.html
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Codigo Column -->
<ng-container matColumnDef="codigo">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Código </th>
<td mat-cell *matCellDef="let row"> {{row.codigo}} </td>
</ng-container>
<!-- Nome Column -->
<ng-container matColumnDef="nome">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Nome </th>
<td mat-cell *matCellDef="let row"> {{row.nome}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">Não foram encontrados itens para mostrar "{{input.value}}"</td>
</tr>
<!-- Actions Column -->
<ng-container matColumnDef="acao">
<mat-header-cell *matHeaderCellDef>
<label>Ações</label>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button color="primary" aria-label="Editar curso" (click)="editar(cliente.id)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" aria-label="Excluir curso" (click)="delete(cliente.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
</table>
<div class="spinner">
<mat-spinner *ngIf="isLoading"></mat-spinner>
</div>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div>
clientes interface:
export interface Clientes {
id?: number;
codigo: string;
nome: string;
}