时间戳

首页 > 解决方案 > 禁用 html 或 html 和 typescript 中的按钮

html - 禁用 html 或 html 和 typescript 中的按钮

问题描述

我试图在没有任何条件的情况下按下按钮来禁用它，但我不能。是一个 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
  }

}

我只想在单击后禁用该按钮。

标签： htmlangulartypescriptionic4

解决方案

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

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

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

推荐阅读