如何在Angular中单击后禁用按钮

Question

我是Angular的新手，我想知道在单击同一个按钮并执行相应操作后如何禁用该按钮

这是我的按钮html代码

<button type="button" class="btn btn-primary" (click)="actionMethod()">Give Kitchen access</button> <br> <br>

Answer 1

您可以将disabled属性绑定到标志（例如clicked），然后在click事件处理程序中设置该标志：

<button type="button" [disabled]="clicked" (click)="actionMethod(); clicked = true;" class="btn btn-primary">Give Kitchen access</button>

标志应在组件类中声明：

clicked = false;

有关演示，请参见this stackblitz。

Answer 2

<button type="button" class="btn btn-primary" (click)="actionMethod($event)">Give Kitchen access</button>

actionMethod(event: any) {
    event.target.disabled = true;
}

Answer 3

TypeScript实现

如果您使用的是Angular，则可能使用的是TypeScript。这是TypeScript实现（受@DanielWilliams的js实现启发）：

组件html

<button type="button" class="btn btn-primary" (click)="actionMethod($event)">Give Kitchen access</button>

组件ts

actionMethod($event: MouseEvent) {
    ($event.target as HTMLButtonElement).disabled = true;
    // Do actions.
}

这是IMO，是一种出色的解决方案，因为您不必在Component ts文件中保留布尔值，并且可以获得TypeScript的类型。

Answer 4

一种template reference方法：

    <button (click)="submit();submitButton.disabled = true" #submitButton>submit</button>

StackBlitz