Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu button está como Editar item ao inicializar no navegador.

Como resolvo esse problema? O vs code e o console do navegador não apresentam erros.

link do repositório: https://github.com/jlateles/ProjetoLifeCycle

1 resposta
solução!

Oi, Júlia, tudo bem?

O problema acontece, pois no arquivo "input.component.ts" localizado na pasta "input" há um trecho de código referente ao método ngOnChanges que atua nas mudanças das propriedades de entrada do componente:

ngOnChanges(changes: SimpleChanges): void {
    if(changes ['itemQueVaiSerEditado'].firstChange){
      this.editando = true;
      this.textoBtn = 'Editar item';
      this.valorItem = this.itemQueVaiSerEditado?.nome;
    }
}

Nesse trecho a condição verifica se a mudança detectada na propriedade itemQueVaiSerEditado é a primeira mudança desde que o componente foi instanciado. Se for a primeira mudança (firstChange é verdadeiro), então o código dentro do bloco if é executado, configurando o componente para um estado de "editando" um item. Entretanto, não temos nenhum item adicionado na lista, e, portanto, independente dessa informação, desde o momento que tentamos adicionar os itens no input o código entende que queremos editar um item já existente e trava o botão na condição de edição de um item.

Para solucionar esse problema, podemos adicionar um ponto de exclamação antes de changes para negar a afirmação de que desde a primeira mudança nós queremos manter o padrão de edição. Ficaria assim:

ngOnChanges(changes: SimpleChanges): void {
    if(!changes ['itemQueVaiSerEditado'].firstChange){
      this.editando = true;
      this.textoBtn = 'Editar item';
      this.valorItem = this.itemQueVaiSerEditado?.nome;
    }
}

Isso significa que o código dentro do bloco if será executado para todas as mudanças na propriedade itemQueVaiSerEditado exceto pela primeira mudança. Ou seja, o componente é configurado para o estado de "editando" um item somente após a primeira mudança ter ocorrido. Sendo assim, nós primeiro iremos adicionar um item a lista e a partir do momento em que clicarmos no botão de editar o item que já está na lista há essa alteração no estado do botão, para alterar o nome de um dos itens.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software