禁用 html 或 html 和 typescript 中的按钮

Posted 2023-03-13

【中文标题】禁用 html 或 html 和 typescript 中的按钮

【英文标题】：Disable a button in html or html and typescript

【发布时间】：2019-08-18 06:16:27

【问题描述】：

我试图通过无条件按下按钮来禁用按钮，但我不能。是一个 Ionic-Angular 项目。

我的html：

<ion-content padding>
    <button ion-button #a (click)="letraIntroducida('a')">a</button>
</ion-content>

我的 ts：

import  Component  from '@angular/core';
import  NavController, NavParams, ToastController  from 'ionic-angular';

@Component(
  selector: 'page-tipopregunta1',
  templateUrl: 'tipopregunta1.html',
)
export class Tipopregunta1Page 

  constructor(public navCtrl: NavController, public navParams: NavParams) 

  

  letraIntroducida(letraUsuario: string)
  //here makes code not important
  

我只想在点击后禁用按钮。

【参考方案1】：

您需要使用属性将按钮设置为禁用

.html

<ion-content padding>
    <button 
      ion-button 
      #a 
      [disabled]="isDisabled" // <- set disabled prop here
      (click)="letraIntroducida('a')">a
    </button>
</ion-content>

.ts

@Component(
  selector: 'page-tipopregunta1',
  templateUrl: 'tipopregunta1.html',
)
export class Tipopregunta1Page 
  isDisabled = false; // <- create variable to determine state

  constructor(public navCtrl: NavController, public navParams: NavParams) 

  letraIntroducida(letraUsuario: string)
    isDisabled = true; // <- toggle the state
  

另外，欢迎来到 SO。下一次，包括您尝试使其工作的一些步骤以及这些步骤失败的原因。

当人们表现出他们首先尝试自己解决问题时，社区会更加开放。

【讨论】：

哦，谢谢。下次我会提供更多细节

如果您有很多按钮，只需分别命名它们，例如isSubmitDisabled 和isCancelDisabled