更改 html 和 Angular 2 中的按钮文本答案

【问题标题】：Change Button text in html and angular 2更改 html 和 Angular 2 中的按钮文本
【发布时间】：2020-02-15 11:08:27
【问题描述】：

我想在选择按钮文本后更改它，从逻辑上讲它工作正常，最初是按钮突出显示，一旦我点击它就会明显改变然后如果我悬停禁用符号将显示第一张图片：点击前第二张图片：点击后所以我想要的是，当我单击“是”时，它应该将其更改为“否”，如果我将鼠标悬停，则必须显示禁用符号这是我的 HTML 代码

 <div>
                    <button type="button" class="confirm"
                            [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
                            style="color: blue;"
                            (click)="sayYes()">
                        YES
                    </button>

</div>

【问题讨论】：

标签： html angular button disable

【解决方案1】：

最短的方法是使用innerText 有条件地在按钮内呈现文本

<button [innerText]="condition ? 'YES' : 'NO'"></button>

【讨论】：

【解决方案2】：

in yourComponent.html

<div>
                    <button type="button" class="confirm"
                            [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
                            style="color: blue;"
                            (click)="sayYes()">
                       {{buttonTitle}}
                    </button>

</div>

在 .ts

中

创建一个新的布尔变量 isClickedOnYes 并将其初始化为 false。

isClickedOnYes: boolean = false;
titleButton: string = 'YES'

当您单击按钮时，它变为 true，标题变为 NO，当您再次单击时，它变成了 false，标题变成了 YES；

在 sayYes() 函数中，您可以实现如下逻辑：

sayYes() {
  if(this.isClickedOnYes == false){
    this.titleButton= 'NO'
    this.isClickedOnYes = true;
  }
  else {
    this.titleButton= 'YES'
    this.isClickedOnYes = false;
 }

 }

【讨论】：

【解决方案3】：

有很多方法可以更改文本。我会使用您的“禁用”属性条件进行插值，如下所示：

<button type="button" class="confirm"
    [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
    style="color: blue;"
    (click)="sayYes()">
        {{ (isConfirmed && agree) || (isConfirmed && nutral) ? 'NO' : 'YES' }}
</button>

要禁用悬停按钮，您可以添加值为“none”的 css 属性“pointer-events”。这将使您的按钮无法点击，然后您自己设置样式。

button:hover{
    pointer-events: none;
}

【讨论】：