禁用 html 或 html 和 typescript 中的按钮

Question

我试图通过无条件按下按钮来禁用按钮，但我不能。是一个 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
  }

}

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

Answer 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。下一次，包括您尝试使其工作的一些步骤以及这些步骤失败的原因。

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