发送 OTP 后无法显示输入 - Ionic FirebaseX

Question

我正在使用最新的 Ionic 和 FirebaseX (cordova-plugin-firebasex)。我能够成功地将 OTP 发送到输入的手机号码。但由于某种原因，在发送 OTP 后，我无法启用 OTP 输入并隐藏 GET OTP 按钮。

我的 HTML：

    <ion-row class="ion-margin">
        <ion-col size="2" offset="1" class="phone-code">
            <ion-input disabled value="+91"></ion-input>
        </ion-col>
        <ion-col size="8" class="phone-number">
            <ion-input type="number" inputmode="numeric" [(ngModel)]="phonenumber" autofocus placeholder="Enter Phone Number"></ion-input>
        </ion-col>
    </ion-row>
    <ion-row class="ion-margin" #otpRow *ngIf="otpSent">
        <ion-col size="12" class="ion-text-center">
            <ion-input [(ngModel)]="otp1val" #otp1 type="number" inputmode="numeric" required maxLength="1" (keyup)="otpController($event,otp2,'')" class="otp-input"></ion-input>
            <ion-input [(ngModel)]="otp2val" #otp2 type="number" inputmode="numeric" required maxLength="1" (keyup)="otpController($event,otp3,otp1)" class="otp-input"></ion-input>
            <ion-input [(ngModel)]="otp3val" #otp3 type="number" inputmode="numeric" required maxLength="1" (keyup)="otpController($event,otp4,otp2)" class="otp-input"></ion-input>
            <ion-input [(ngModel)]="otp4val" #otp4 type="number" inputmode="numeric"  required maxLength="1" (keyup)="otpController($event,otp5,otp3)" class="otp-input"></ion-input>
            <ion-input [(ngModel)]="otp5val" #otp5 type="number" inputmode="numeric"  required maxLength="1" (keyup)="otpController($event,otp6,otp4)" class="otp-input"></ion-input>
            <ion-input [(ngModel)]="otp6val" #otp6 type="number" inputmode="numeric"  required maxLength="1" (keyup)="otpController($event,'',otp5)" class="otp-input"></ion-input>
        </ion-col>
    </ion-row>
    <ion-row class="ion-margin">
        <ion-col size="8" offset="2" class="ion-text-center">
            <ion-button color="light" size="large" *ngIf="!otpSent" (click)="getOtp()" [disabled]="waitUp">{{otpBtnText}} <ion-spinner name="crescent" *ngIf="waitUp" color="danger"></ion-spinner></ion-button>
            <ion-button color="light" size="large" *ngIf="otpSent" (click)="verifyOtp()"> VERIFY </ion-button>
        </ion-col>
    </ion-row>

GET OTP 按钮，调用如下函数：

getOtp(){
    alert("Get OTP Called");
    this.waitUp = true;
    this.otpBtnText = "SENDING ";
    var phoneRegex = /^[6-9]{1}[0-9]{9}$/;
    if( (this.phonenumber) && (phoneRegex.test(this.phonenumber.toString())!=false) ) {
        console.log("Verifying Phone Number");
        this.fauth.verifyPhoneNumber((credential)=>{
            this.displayOtpInput();
            this.safecred = credential;
            alert("OTP Sent");
        }, (error) => {
            alert("Failed to verify phone number: " + JSON.stringify(error));
            this.waitUp = false;
            this.otpBtnText = "GET OTP";
        }, "+91"+this.phonenumber.toString(), 60);
    }else{
        alert("Invalid Mobile Number");
        this.waitUp = false;
        this.otpBtnText = "GET OTP";
    }
}

最后displayOtpInput()代码如下：

displayOtpInput(){
    alert("Displaying OTP Input");
    this.otpSent = true;
    this.waitUp = false;
}

完整的TypeScript如下：

import { Component, OnInit, ViewChildren } from '@angular/core';
import { FirebaseX } from "@ionic-native/firebase-x/ngx";

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  public phonenumber:number;
  public otp1val:number;
  public otp2val:number;
  public otp3val:number;
  public otp4val:number;
  public otp5val:number;
  public otp6val:number;
  public otpSent: boolean = false;
  public otpBtnText: string = "GET OTP";
  public verificationId: any;
  public safecred: any = {};
  public waitUp: boolean = false;
  constructor(public fauth: FirebaseX) { 
  }

  ngOnInit() {

  }

  displayOtpInput(){
    alert("Displaying OTP Input");
    this.otpSent = true;
    this.waitUp = false;
  }

  loginWithCred(){
    this.fauth.signInWithCredential(this.safecred, function() {
        alert("Successfully signed in");
    }, function(error) {
        alert("Failed to signin");
        console.error("Failed to sign in", error);
    });
  }

  verifyOtp(){
    alert("Verifying OTP");
    try{
        var otpCode = this.otp1val.toString() + this.otp2val.toString() + this.otp3val.toString() + this.otp4val.toString() + this.otp5val.toString() + this.otp6val.toString();
        this.safecred.code = otpCode;
        this.loginWithCred();
    }catch(err){
        console.log(err);
        alert("Invalid OTP");
    }
    this.waitUp = false;
  }

  getOtp(){
    alert("Get OTP Called");
    this.waitUp = true;
    this.otpBtnText = "SENDING ";
    var phoneRegex = /^[6-9]{1}[0-9]{9}$/;
    if( (this.phonenumber) && (phoneRegex.test(this.phonenumber.toString())!=false) ) {
        console.log("Verifying Phone Number");
        this.fauth.verifyPhoneNumber((credential)=>{
            this.displayOtpInput();
            this.safecred = credential;
            alert("OTP Sent");
        }, (error) => {
            alert("Failed to verify phone number: " + JSON.stringify(error));
            this.waitUp = false;
            this.otpBtnText = "GET OTP";
        }, "+91"+this.phonenumber.toString(), 60);
    }else{
        alert("Invalid Mobile Number");
        this.waitUp = false;
        this.otpBtnText = "GET OTP";
    }
  }
  otpController(event,next,prev){
   if(event.target.value.length < 1 && prev){
     prev.setFocus()
   }
   else if(next && event.target.value.length>0){
     next.setFocus();
   }
   else if(next == ""){
    this.verifyOtp();
   }
   else {
    return 0;
   } 
 }
}

我成功收到所有警报（即“OTP 已发送”和“显示 OTP 输入”），但输入未显示。我尝试创建一个假按钮以在单击时直接调用displayOtpInput() 函数，并且它成功运行。但只有在verifyPhoneNumber() 函数中调用此函数时，它才会显示警报，但不会显示输入。我什至尝试提醒otpSent的值，它显示true，但没有显示OTP输入，也没有显示验证按钮。

我在这里做错了什么？

Answer 1

您在函数中使用了 Promise，这就是发生这种情况的原因。请删除诸如 asyn await 之类的 Promise。