如何在角度2中禁用div标签 [英] How to disable the div tag in angular 2

问题描述

我试图在成功回调该操作后禁用div标记。

I am trying to disable the div tag after a success callback of that action.

请查看我的离子内容

<ion-content padding class="forgot-password">
  <div [ngClass]="{active: isOn,disabled: isDisabled}">
    <ion-item>
        <ion-label floating>Email/Mobile</ion-label>
        <ion-input type="text" [(ngModel)]="loginId"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="generateOTP(!isOn);">Send OTP</button><br><br><br>
  </div>
  <br>

  <div *ngIf="showRePasswd">
    <ion-item>
        <ion-label floating>Enter OTP</ion-label>
        <ion-input type="text" [(ngModel)]="passwd"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="resetPassword();">Send Password</button>
  </div>
</ion-content>

这是我的.ts文件

export class ForgotPasswordPage {

    public loginId = "";
    public passwd = "";

  public showRePasswd = false;
  isDisabled = false;
  isOn = false;

  constructor(private navCtrl: NavController, private logger: Logger, private user: Users) {

  }

  generateOTP(newstate) {
    this.logger.info("invoking generateOTP FN");
    var _this = this;
    this.user.generateOTP(this.loginId, function(result,data){
      if(result == '1') {
        alert(data);
        _this.showRePasswd = !_this.showRePasswd;
        _this.isDisabled = true;
        _this.isOn = newstate;
      }
      else {
        //this.showRePasswd = this.showRePasswd;
        alert(data);
      }
    })
  }

  resetPassword() {
    this.logger.info("invoking resetPassword FN");
    var _this = this;

    this.user.resetPassword(this.passwd, function(result,data) {
      if(result == '1') {
        alert(data);
        _this.navCtrl.push(LoginPage);
      }
      else {
        alert(data);
      }
    })
  }
}

我试过 [ngClass] 但是我无法在成功回调后禁用我的div标签。

I tried [ngClass] but i am not able to make my div tag disable after the success callback.

我也尝试过使用 [已禁用] 但无法正常工作

I also tried using [disabled] but not working

这是 demo 用于禁用div标签，但在我的情况下无法正常工作

Here is a demo for disable a div tag but in my case not working

我的要求是在成功回调后使我的输入字段和按钮被禁用

My requirement is to make my input field and button to be disabled after success callback

推荐答案

您可以添加属性，如

<div [attr.disabled]="isDisabled ? true : null">

但< div> 不支持已禁用属性。

也许这就是你想要的

<div>(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

使用一些自定义CSS使 .isDiabled 看起来已禁用。

with some custom CSS that makes .isDiabled look disabled.

创建方法可能更好将代码放在那里而不是内联。

It might be better to create a method to put the code there instead of inline.

这篇关于如何在角度2中禁用div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！