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

Question

我试图在成功回调该操作后禁用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, function(result,data) {
      if(result == '1') {
        alert(data);
        _this.navCtrl.push(LoginPage);
      }
      else {
        alert(data);
      }
    })
  }
}

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

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

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

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

Answer 1

您可以添加类似的属性

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

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

也许这就是你想要的

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

使用一些自定义CSS使.isDiabled外观禁用.

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

Answer 2

您可以使用CSS属性pointer-events: none; 在你的标签 div 中：

<ion-content padding class="forgot-password">
  <div style="pointer-events: none;">
   ...
  </div>
</ion-content>

Answer 3

这在我的 Angular 8 项目中使用：首先设置为 HTML 文件，如下所示。设置为Div标签ngClass=>

<div class="col-md-3" [ngClass]="{disabledNoOfCasesDiv: !isActiveNOofCasesNo}>
<label class="control-label mb-2">No. of Cases Receive</label>
<input type="number" class="form-control" [(ngModel)]="CollectJob.NoOfCases"
placeholder="No. Cases Receive" name="NoCasesReceive">
</div>

然后下一步编写 CSS 来禁用事件：

.disabledNoOfCasesDiv{ pointer-events: none; opacity: 2.0;}

然后最后：

声明变量并设置为布尔值

 isActiveNOofCasesNo: boolean;

接下来，只要在您想要启用或禁用 div 标签的地方传递 true/false 值，div 就会自动启用或禁用。

this.isActiveNOofCasesNo = true;
this.isActiveNOofCasesNo = false;

谢谢.....学习愉快！...:) Angular html CSS ionic TypeScript