如何<a>在 angular 7 中切换标签中</a>的文本

Question

我在标签上有一个带有“Unfreeze”文本的按钮。 我想在单击按钮时将其切换为“冻结”。 这是纽约的代码：

<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 循环。

Answer 1

我不确定你为什么使用这种方法，你可以像这样有条件地切换文本 -

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