Question

我将禁用一系列按钮中的特定按钮，如下所示：

<button name="paybtn-1" id="paybtn-1" (click)="myfunc(1)">Pay</button>
<button name="paybtn-2" id="paybtn-2" (click)="myfunc(2)">Pay</button>
<button name="paybtn-3" id="paybtn-3" (click)="myfunc(3)">Pay</button>

说，我想在点击paybtn-1时将其禁用。

在ts文件中，我传递了按钮的id，但是，我卡住了如何禁用特定按钮：

myfunc(id){
//
}

Answer 1

如果您需要以正确的方式执行此操作，请在TS中为每个按钮定义一个数组，并将Disalbed属性绑定到该按钮。单击按钮时将其更改为false。

Answer 2

要禁用按钮，可以使用[disabled]，如下所示：

<button [disabled]="booleanCondition" name="paybtn-1" id="paybtn-1" (click)="myfunc(1)">Pay</button>

您必须在booleanCondition文件中定义.ts变量

Answer 3

在这种情况下，更好的方法是通过disabled attribute禁用按钮。

组件：

 element: HTMLElement;    
disableButton(id) {
        this.element = document.getElementById(id) as HTMLElement;
        this.element.setAttribute('disabled', 'true');
      }
      enableButton(id) {
        this.element = document.getElementById(protocol) as HTMLElement;
        this.element.removeAttribute('disabled');
      }

HTML：

<button [id]="id" name="paybtn-1"(click)="myfunc(1)">Pay</button>

注意：

id是一个变量

这对我来说很好。

Answer 4

保持自己的风格：

将禁用的属性添加到按钮

<button name="paybtn-1" id="paybtn-1" [disabled]='disabled["1"]' (click)="myfunc(1)">Pay</button>

添加禁用此按钮的方法

let disabled = {1:false,2:false,3:false}
myfunc(id){
disabled[id] = true
}

如何在Angular 7中禁用特定按钮

4 个答案: