Quando faço o delete, eu tenho recebido sempre como retorno o id = 0, que é o que adicionei ao código:
pensamento: Pensamentos = {id: 0}; //outros códigos foram ocultados
Neste caso como ficaria a declaração?
Solucionado
Quando faço o delete, eu tenho recebido sempre como retorno o id = 0, que é o que adicionei ao código:
pensamento: Pensamentos = {id: 0}; //outros códigos foram ocultados
Neste caso como ficaria a declaração?
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:
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.
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]);
}
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!
=)