Невозможно отобразить ввод после отправки OTP - Ioni c FirebaseX

Question

Я использую последнюю версию Ioni c и FirebaseX (cordova-plugin-firebasex). Я могу успешно отправить OTP на введенный номер мобильного телефона. Но по какой-то причине после отправки OTP я не могу включить вход OTP и скрыть кнопку GET OTP.

My 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 Sent» и «Displaying OTP Input»), но ввод не отображается Я попытался создать поддельную кнопку для вызова функции displayOtpInput() непосредственно при нажатии, и она успешно работает. Но только когда эта функция вызывается в функции verifyPhoneNumber(), она отображает предупреждение, но ввод не отображается. Я даже попытался оповестить значение otpSent, и оно показывает true, но вход OTP не отображается, и не отображается кнопка проверки.

Что я здесь не так делаю?