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

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 中为每个按钮定义一个数组，并将禁用属性绑定到该按钮。单击按钮时将其更改为 false。

Answer 2

保持你的风格：

向按钮添加禁用属性

<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
}

Answer 3

要禁用按钮，您可以使用 [disabled]，例如：

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

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

Answer 4

在这种情况下，更好的方法是通过 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 是一个变量

这对我来说很好。

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

How to disable a particular button in Angular 7

angular-template

angular