Как отключить тег div в угловом 2

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], но не работает

Вот является demo для отключения сНа тега, но в моем случае не работает

Мое требование, чтобы сделать мое поле ввода и кнопку быть отключен после успешного обратного вызова

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

Элемент Div не может быть отключен, как элементы управления формой. Вместо этого вы можете отключить элементы управления формой.

Предоставлено пример имеет пользовательский класс "отключил"

styles: [` 
    .button { 
     width: 120px; 
     border: medium solid black; 
    } 

    .active { 
     background-color: red; 
    } 

    .disabled { 
     color: gray; 
     border: medium solid gray; 
    } 
    `]