0

Tudo bem? estou criando um botão que quando clicado exibe uma imagem, e se clicado novamente ele volta pra imagem antiga, isso no angular, atualmente só estou conseguindo pegar a primeira ação, não consigo voltar para primeira imagem.

HTML
<div (click)="clique()">
  <img src="{{ imagem }}" />
</div>
TS
imagem: string;

clique(): void {
  if(this.imagem) {
    this.imagem = 'imagem1.jpg';
  } else {
    this.imagem = 'imagem2.jpg';
  }
}

1 Resposta 1

0

Seu problema aí é que como você não atribui nenhum valor ao atributo imagem sempre irá cair no else pelo fato da variável ser undefined, uma das maneiras de fazer o que deseja é inserindo mais um atributo que controle qual das duas imagens será renderizada:

HTML

<div (click)="clique()">
  <img [src]="imagem" />
</div>

TS

imagem: string;
control = false;

clique(): void {
  this.control = !this.control;   // Espero que saiba o que isso faz
  if(this.control) {              // Se control igual true
    this.imagem = 'imagem1.jpg';
  } else {                        // Se control igual false
    this.imagem = 'imagem2.jpg';
  }
}

Poder ver um exemplo funcional aqui.

1
  • 1
    Muito obrigado amigo, funcionou perfeitamente, e obrigado pela explicação para que eu pudesse perceber meu erro 23/06/2021 às 18:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .