Angular Put editando dados da API

#Crud #Put #Http

Eai galera, no artigo de hoje vamos fazer a função de editar os dados da nossa tabela.

Vamos começar criando um método http no nosso serviço.

//PUT EDITAR DADOS DA API 
  put ( produtos : any , id : any ): Observable < any >{ 
    return  this . http . put < qualquer >( `http://localhost:3000/produtos/ ${id} ` ,produtos ) 
  }

Lembrando que estamos usando uma API Rest Fake do json-server.

No component.ts onde fica nosso Typescript vamos adicionar a seguinte função:

//EDITAR
  editar(item: any) {
    const {
      nome,
      descricao,
      id,
    } = item;
    const object = {
      nome,
      descricao,
      id,
    };
    this.novoProdutoForm.patchValue(object);
  }

  update(object: any, id: any) {
    this.serviceCrud.put(object, id).subscribe();
  }

A função editar está pegando os itens dentro da const e passando o valor para novoProdutoForm que é nosso formulário.

Enquanto o update se comunica com nosso serviço e faz a requisição na url para que os dados sejam alterados.

Agora só devemos colocar dentro do botão enviar os dados o nosso “if” para que ele saiba quando editar e quando criar um novo item. Lembrando que no artigo anterior ensino como criar um post.

 //ENVIAR
  async enviar() {
    const {
      nome,
      descricao,
      id,

    } = this.novoProdutoForm.value;

    const object = {
      nome: nome,
      descricao: descricao,
      id: id,
    };

    if (id === 0) {
      this.criarPost(object);
      this.limparCampos();
      this.getLista();

//NOSSO ELSE QUE ESTÁ FAZENDO A FUNÇÃO DE EDITAR, CASO O ID NÃO SEJA 0
    } else {
      this.update(object, id);
      this.limparCampos();
      this.getLista();
    }
  }

No component.html vamos adicionar no nosso botão o evento click que terá a função de editar.

<tr *ngFor="let items of lista">
        <td>{{items.nome}}</td>
        <td>{{items.descricao}}</td>
        <td>
          <button class="btn btn-warning" (click)="editar(items)">Editar</button>          
        </td>
      </tr>

E nosso editar vai ficar dessa forma:

Por hoje é só e até o próximo artigo onde criaremos o deletar e concluiremos nosso crud em angular.