更改 html 和 angular 中的按钮文本 2

Question

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

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

</div>

Answer 1

最短的方法是使用 innerText

有条件地在按钮内呈现文本

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

Answer 2

更改文本的方法有很多种。我会根据您的 'disabled' 属性条件进行插值，如下所示：

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

要禁用悬停按钮，您可以添加 css 属性 'pointer-events' 和值 'none'。这将使您的按钮不可点击，然后您可以自行设置样式。

button:hover{
    pointer-events: none;
}

Answer 3

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'

当你点击按钮时它变为真并且标题变为NO，当你再次点击时，它变成了假，标题变成了 YES；

在 sayYes() 函数中你可以实现这样的逻辑：

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

 }

更改 html 和 angular 中的按钮文本 2

Change Button text in html and angular 2

html

button

angular

disable