So schalten Sie den Text im <a> -Tag in Winkel 7 um

8

Ich habe eine Schaltfläche auf dem Tag mit dem Text "Unfreeze". Ich möchte es auf "Einfrieren" umschalten, wenn ich auf die Schaltfläche klicke. Hier ist mein Code:

<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";
    }
}

Aus irgendeinem Grund funktioniert es nicht. event.srcElement.childNodes[1].textContentist gleich "Unfreeze", wenn ich es tröste, aber es tritt nicht in die if-Schleife ein.

Yogesh Mali
quelle
<a class="btn btn-primary full-width" (click)="clickFreeze($event)"> <i class = "fa fa-plus-circle"> </ i> Unfreeze </a>
Yogesh Mali
2
Spielen Sie nicht mit dem DOM-Element direkt im Modell.
Krishna Prashatt

Antworten:

14

Ich bin mir nicht sicher, warum Sie diesen Ansatz verwenden. Sie können den Text einfach so bedingt umschalten.

.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
quelle
Vielen Dank für Ihre Hilfe, aber (click) = "clickFreeze () macht auch andere Sachen, so dass ich (click) =" isFreeze =! isFreeze "nicht verwenden kann
Yogesh Mali
@YogeshMali Ja, Sie können einfach die Funktion aufrufen, wie Sie gesagt haben, und dort dasselbe tun. Sie können sie trotzig an Ihre Anforderungen anpassen.
Pardeep Jain