Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] problema para atualizar item

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;
}
3 respostas

Opa Natali, tudo certo?

Uma possível causa desse problema é a passagem do ID do cliente para a função editar(). No seu arquivo HTML, na linha onde você chama a função editar(), você está passando cliente.id como parâmetro, mas na sua interface Clientes, o ID é opcional (id?: number;). Isso pode estar causando o erro de retornar undefined.

Sugiro verificar esse ponto e analisar se o problema persiste.

Fico à disposição.

Tenha um bom dia e bons estudos.

Oi Gabriel, obrigada pela ajuda! Mas tirei o opcional da interface e mesmo assim continuo com o erro de underfined :(

solução!

Resolvido.