Como alternar o texto na tag <a> na angular 7

8

Eu tenho um botão na tag com o texto "Descongelar". Quero alterná-lo para "Congelar" ao clicar no botão. Aqui está o código ny:

<a class="btn btn-primary full-width" (click)="clickFreeze($event)">
                    <i class="fa fa-plus-circle"></i>Unfreeze</a>

private clickFreeze(event) {
    console.log("event.srcElement.childNodes[1].textContent", event.srcElement.childNodes[1].textContent);
    if(event.srcElement.childNodes[1].textContent =='Unfreeze'){
      event.srcElement.innerText="Freeze and Save";
    } else if(event.srcElement.innerText =='Freeze and Save'){
      event.srcElement.innerText="Unfreeze";
    }
}

Por alguma razão, isso não funciona. event.srcElement.childNodes[1].textContenté igual a "Descongelar" quando eu o console, mas ele não entra no loop if.

Yogesh Mali
fonte
<a class="btn btn-primária largura total" (click)="clickFreeze($event)"> <i class = "fa fa-plus-circle"> </i> Descongelar </a>
Yogesh Mali
2
não brinque com o elemento DOM diretamente no modelo.
Krishna Prashatt 7/11/19

Respostas:

14

Não sei por que você está usando essa abordagem. Você pode simplesmente alternar o texto condicionalmente assim:

.html

<a class="btn btn-primary" (click)="isFreeze = !isFreeze">
  <i class="fa fa-plus-circle"></i>
  {{isFreeze ? "Unfreeze" : "Freeze and Save"}}
</a>

.ts

isFreeze: boolean = true;
Pardeep Jain
fonte
obrigado pela sua ajuda, mas (clique) = "clickFreeze () está fazendo outras coisas tão bem como eu não pode usar (clique) =" isFreeze = isFreeze"!
Yogesh Mali
@YogeshMali sim, você pode simplesmente chamar a função como você disse e fazer o mesmo lá, você pode desafiadoramente personalizar conforme suas necessidades.
precisa