[Dúvida] Como ficaria para buscar o id do que existe com o backend e o banco de dados

Oi Natali, tudo bem?

Será que você poderia compartilhar um pouco mais do código para que eu possa entender melhor e ajudar melhor?

Assim eu poderia dar uma olhada no seu código e no da aula e entender melhor qual seria o problema e como resolver.

Se possível, você poderia estar também estar explicando melhor o que você gostaria de entender?

Lembre-se detalhes são sempre elementos chave no momento de pedir ajuda, bem como para encontrar uma solução mais apropriada.

Era isso.

Meu component que é de uma lista onde tem o botão de editar esta assim:

displayedColumns: string[] = ['codigo', 'nome', 'acao'];
  dataSource = new MatTableDataSource<Clientes>();
  isLoading: boolean = false;
  cliente: Clientes = {id: 1, codigo: '', nome: ''};

constructor(public dialog: MatDialog,
              private snackBar: MatSnackBar,
              private service: ClientesService,
              private router: Router,
              private route: ActivatedRoute,
              private location: Location) {}

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.listarTodos();
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

editar(id: any) {
    console.log(id);
    this.router.navigate(['editar', id]);
  }

Meu service:

export class ClientesService {

  private readonly API = 'cliente';

  constructor(private http: HttpClient) { }

  listarTodos(): Observable<Clientes[]> {
    return this.http.get<any>(this.API)
    .pipe(
      first(),
      tap(clientes => console.log(clientes)),
      delay(5000)
    );


  }

  salvar(record: Clientes): Observable<Clientes> {
    if (record.id) {
      return this.http.put<Clientes>(`${this.API}/${record.id}`, record);
    } else {
      return this.http.post<Clientes>(this.API, record);
    }
  }

  getById(id: number): Observable<Clientes> {
    return this.http.get<Clientes>(`${this.API}/${id}`);
  }


  delete(id: number): Observable<Clientes> {
    return this.http.delete<Clientes>(`${this.API}/${id}`);
  }

Meu 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()">
            <mat-icon>delete</mat-icon>
          </button>

        </mat-cell>

      </ng-container>
    </table>

Ai a questão é que quando eu coloco o valor do ID no compontent por exemplo id: 0, a minha url fica http://localhost:4200/editar/0 e não puxa o valor real do item que cliquei. E se eu deixo sem nada vem undefined.

Como ficaria no meu component o declaração cliente: Clientes = {id: 1, codigo: '', nome: ''} para puxar o valor real do que estou clicando?

Oi Natali, tudo bem?

Obrigado por compartilhar o código! Vou te ajudar a resolver esse problema. Parece que a principal questão é que quando você clica no botão de editar, o valor do id não está sendo passado corretamente para a página de edição. Além disso, você quer saber como ajustar a declaração do objeto cliente para que ele receba os valores corretos.

Vamos começar pela parte do código em que você chama a função editar a partir do botão de edição no HTML:

<button mat-icon-button color="primary" aria-label="Editar curso" (click)="editar(row.id)">
  <mat-icon>edit</mat-icon>
</button>

Aqui você está passando row.id como argumento para a função editar. Portanto, quando você chama editar(cliente.id) dentro da função, você está tentando acessar um valor que não existe no objeto cliente e daí vem o undefined.

Para corrigir isso, você precisa fazer algumas modificações no seu componente:

1. Remova a declaração cliente: Clientes = {id: 1, codigo: '', nome: ''}; do seu componente, pois você não precisa dela para a funcionalidade de edição.

2. Na função editar, você deve redirecionar para a página de edição passando o ID correto para o roteamento. Então, no seu componente, a função editar ficará assim:

   editar(id: any) {
     console.log(id);
     this.router.navigate(['editar', id]);
   }
   

3. Certifique-se de que na rota 'editar', você está recebendo o ID corretamente. Isso é importante para que você possa buscar os detalhes corretos do cliente.

Agora, quanto à sua pergunta sobre como ajustar a declaração do objeto cliente, você não precisa mais disso para o propósito de edição. O ID do cliente é passado como parâmetro na função editar, e você pode usar esse ID diretamente na página de edição para buscar os detalhes do cliente usando seu serviço.

Em resumo, remova a declaração dispensável do objeto cliente e certifique-se de que o ID correto seja passado para a página de edição.

Dessa forma, você poderá buscar os detalhes do cliente com o serviço usando o ID recebido.

Se tiver mais dúvidas, é só perguntar!

Em suma, era isso!

Abraços e bons estudos.

Deu super certo! Entendi agora como funciona.... muito obrigada!

Imagina, se precisar é só falar.

Abraços e bons estudos!

=)