如何在角度2中禁用div标签

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

请看我的离子含量

<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,data) {
      if(result == '1') {
        alert(data);
        _this.navCtrl.push(LoginPage);
      }
      else {
        alert(data);
      }
    })
  }
}

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

我也试过使用[禁用]但没有工作

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

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

解决方法

您可以添加类似的属性

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

但是< div>不支持disabled属性.

也许这就是你想要的

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

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

创建一个将代码放在那里而不是内联的方法可能会更好.