.Net Core + Angular - Alterar / Excluir

Na aula de hoje vamos fazer a alteração e exclusão dos dados com Angular.

Vamos incluir na tabela duas colunas com os botões Alterar e Excluir.

      
        < table class="table">
          < thead>
          < tr>
              < th scope="col" >#< /th>
              < th scope="col">Nome< /th>
              < th scope="col">Telefone< /th>
              < th scope="col">Endereço>< /th>
              < th scope="col">< /th>
              < th scope="col">< /th>
          < /tr>
          < /thead>
          < tbody>
          < tr *ngFor="let cliente of clientes">
              < td>{{cliente.id}} < /td>
              < td>{{cliente.nome}} < /td>
              < td>{{cliente.telefone}} < /td>
              < td>{{cliente.endereco}} < /td>
              < td>
                < button> Alterar < /button>
              < /td>
              < td>
                < button> Excluir < /button>
              < /td>

          < /tr>
       < /table>
       
    

Iremos executar os métodos Alterar e Excluir no click do botão, passando por parâmetro o objeto cliente.

      
        < table class="table">
          < thead>
          < tr>
              < th scope="col" >#< /th>
              < th scope="col">Nome< /th>
              < th scope="col">Telefone< /th>
              < th scope="col">Endereço>< /th>
              < th scope="col">< /th>
              < th scope="col">< /th>
          < /tr>
          < /thead>
          < tbody>
          < tr *ngFor="let cliente of clientes">
              < td>{{cliente.id}} < /td>
              < td>{{cliente.nome}} < /td>
              < td>{{cliente.telefone}} < /td>
              < td>{{cliente.endereco}} < /td>
              < td>
                < button class="btn btn-primary" (click)="Alterar(cliente)"> Alterar < /button>
              < /td>
              < td>
                < button class="btn btn-danger" (click)="Excluir(cliente)"> Excluir < /button>
              < /td>

          < /tr>
       < /table>
       
    

Vamos criar o método Alterar no componente de clientes, arquivo clientes.component.ts, passando o objeto cliente como parâmetro com a tipagem forte, ou seja, declarando o objeto cliente como tipo Cliente.

Também vamos preencher o escopo corrente , o this.cliente, com o objeto cliente, para que ele possa preencher todo o objeto que está na tela, através do [(ngModel)].

      
        Alterar(_cliente: Cliente){
        this.cliente = _cliente
        }
       
    

Agora iremos modificar o método Salvar(), verificando se o this.cliente.id é maior do que zero. Primeiro vamos incluir a propriedade id na classe Cliente, no arquivo cliente.ts.

      
        export classe Cliente {
          id: number
          nome:string 
          telefone:string 
          endereco:string
        }
       
    

Iremos alterar o método Salvar() e enviar o verbo put e o id do cliente na url para alteração, caso o cliente.id seja maior que zero.

      
        Salvar(){
        if(!this.cliente.id || this.cliente.id === 0){
          this.http.post(this.REST_API_SERVER, this.cliente).subscribe((clienteRest: Cliente) => {
            this.cliente = new Cliente()
            this.mensagem = "Usuário cadastrado com sucesso!"
            setTimeout(() => {
              this.mensagem = undefined;
            },2000)
          })
        }
        else{
          this.http.put(`#{this.REST_API_SERVER/${this.cliente.id}`, this.cliente).subscribe((clienteRest: Cliente) => {
            this.cliente = new Cliente()
            this.mensagem = "Usuário atualizado com sucesso!"
            setTimeout(() => {
              this.mensagem = undefined;
            },2000)
          })
        }
      }
       
    

Vamos fazer o método Excluir(), passando como parâmetro o objeto cliente, com a confirmação de exclusão.

      
        Excluir(cliente: Cliente){
          if(confirm("Confirma?")){
            this.http.put(`#{this.REST_API_SERVER/${cliente.id}`, this.cliente).subscribe(() => {
              this.cliente = new Cliente()
              this.mensagem = "Usuário excluído com sucesso!"
              setTimeout(() => {
                this.mensagem = undefined;
              },2000)
            })
          }
        }
      }