Angular 7で<a>タグのテキストを切り替える方法


8

タグに「Unfreeze」というテキストのボタンがあります。ボタンをクリックすると「フリーズ」に切り替わります。ここに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";
    }
}

何らかの理由で機能しません。 event.srcElement.childNodes[1].textContentコンソールにすると「Unfreeze」に等しくなりますが、ifループに入りません。


<a class="btn btn-primary full-width" (click)="clickFreeze($event)"> <i class = "fa fa-plus-circle"> </ i>凍結解除</a>
Yogesh Mali

2
モデルで直接DOM要素をいじらないでください。
クリシュナプラシャット

回答:


14

なぜあなたがこのアプローチを使用しているのかはわかりません、あなたは単にこのように条件付きでテキストを切り替えることができます-

.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;

あなたの助けに感謝しますが、(クリック)= "clickFreeze()は他のことも行っているため、(クリック)=" isFreeze =!isFreeze "を使用できません
Yogesh Mali

@YogeshMaliはい、あなたは単にあなたが言ったように関数を呼び出すことができ、そこで同じことをすることができます。
Pardeep Jain
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.