I am developing an Angular application where I manage a list of clients. The issue occurs when trying to remove a client from the list: the value of this.cliente.codigo is being sent as undefined in the removal request, even though the client is correctly selected.

This is my PrincipalComponent:

import { Component } from '@angular/core';
import { ClienteService } from '../servico/cliente.service';
import { Cliente } from '../modelo/Cliente';

@Component({
  selector: 'app-principal',
  templateUrl: './principal.component.html',
  styleUrls: ['./principal.component.css'],
})
export class PrincipalComponent {
  cliente = new Cliente();
  btnCadastro: boolean = true;
  tabela: boolean = true;
  clientes: Cliente[] = [];

  constructor(private servico: ClienteService) {}

  selecionar(): void {
    this.servico.selecionar().subscribe((retorno) => (this.clientes = retorno));
  }

  cadastrar(): void {
    this.servico.cadastra(this.cliente).subscribe((retorno) => {
      this.clientes.push(retorno);
      this.cliente = new Cliente();
      alert('Cliente cadastrado com sucesso!');
    });
  }

  selecionarCliente(pos: number): void {
    this.cliente = this.clientes[pos];
    console.log('Cliente selecionado:', this.cliente);
    this.btnCadastro = false;
    this.tabela = false;
  }

  editar(): void {
    this.servico.editar(this.cliente).subscribe((retorno) => {
      let posicao = this.clientes.findIndex((c) => c.codigo == retorno.codigo);
      this.clientes[posicao] = retorno;
      this.cliente = new Cliente();
      this.btnCadastro = true;
      this.tabela = true;
      alert('Cliente editado com sucesso!');
    });
  }

  remover(): void {
    console.log('Código do cliente a ser removido:', this.cliente.codigo);
    if (this.cliente.codigo !== undefined) {
      this.servico.remover(this.cliente.codigo).subscribe(() => {
        const posicao = this.clientes.findIndex(c => c.codigo === this.cliente.codigo);
        this.clientes.splice(posicao, 1);
        this.cliente = new Cliente();
        this.btnCadastro = true;
        this.tabela = true;
        alert('Cliente removido com sucesso!');
      });
    } else {
      console.error('Erro: Código do cliente não está definido ao tentar remover.');
    }
  }

  ngOnInit()

When a client is selected, the selecionarCliente method is called, and the client is correctly displayed in the console, as shown in the image. However, when trying to remove the client, this.cliente.codigo is undefined.

I’ve tried looking in various places on the internet and in ChatGPT itself, but nothing worked…
Any help would be greatly appreciated!

My english is from chatGPT so…