So deaktivieren Sie das Div-Tag in Winkel 2

Question

Ich versuche, das Div-Tag nach einem erfolgreichen Rückruf dieser Aktion zu deaktivieren.

schauen Sie bitte mein Ionengehalt

<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> 

hier ist mein .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); 
     } 
    }) 
    } 
} 

Datei habe ich versucht [ngClass], aber ich bin nicht in der Lage meinen div-Tag deaktivieren, nachdem der Erfolg Rückruf zu machen .

Ich habe auch versucht [disabled] verwenden, aber nicht

Hier ist ein demo für disable ein div-Tag arbeiten, aber in meinem Fall nicht funktioniert

Meine Forderung ist mein Eingabefeld und Schaltfläche zu machen nach

deaktiviert werden

Answer 1

Sie können das Attribut hinzufügen, wie

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

aber <div> nicht das disabled Attribut nicht unterstützt.

Vielleicht ist es das, was Sie

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

mit einigen benutzerdefinierten CSS wollen, die .isDiabled deaktiviert aussehen läßt.

Es könnte besser sein, eine Methode zu erstellen, um den Code dort anstelle von Inline zu setzen.

Answer 2

Div-Element kann nicht wie Formularsteuerelemente deaktiviert werden. Sie können stattdessen Formularsteuerelemente in div deaktivieren.

Vorausgesetzt Beispiel hat benutzerdefinierte Klasse "disabled"

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

    .active { 
     background-color: red; 
    } 

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