自动接收 OTP 并验证 OTP，UI 未更新

Question

我正在尝试为 Android 的 Ionic 4 应用程序实施自动 otp 验证。我尝试了下面的代码，我能够收到消息但是 UI Input Filed 没有更新收到的 OTP

app.component.ts

      constructor(public alertCtrl: AlertController,
    public platform:Platform,
    public androidPermissions: AndroidPermissions,
    public http:Http,
  public navCtrl:NavController,
  public navParams: NavParams) {
    document.addEventListener('onSMSArrive', function(e){
      var sms = e.data;

     console.log("received sms "+JSON.stringify( sms ) );

     if(sms.address=='HP-611773') //look for your message address
     {
       this.otp=sms.body.substr(0,4);

      this.verify_otp();
     }
    });

      }


 verifyOTP()
    {
      console.log("verify otp");

    }

我可以通过 OTP 看到警报，但我的下面 UI 没有更新。

app.component.html

<ion-header>
  <ion-toolbar>
    <ion-button size="small" (click)="goBackToFirstTimeLogin()">Back</ion-button>
    <ion-title>verifyOTP</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-item>
    <ion-label floating>Enter OTP</ion-label>
    <ion-input type="text" [(ngModel)]="otp"></ion-input>
  </ion-item>
  <button ion-button (click)="verifyOTP()">Verify</button>
  <ion-button size="small" (click)="setPassword()">SetUp Password</ion-button>
</ion-content>

`

[(ngModel)]="otp" 值未更新。

我遇到以下错误：

Error Getting Like this

我在下面关注 GitHub Link :

https://github.com/bharathirajatut/ionic3/tree/master/SMSOTPVerificationAutomate

你能帮助我吗，在此先感谢!!!!

Answer 1

将它放在 ionViewCanEnter() 中，以便在每次加载视图时更新它

Answer 2

看了很多文档后，我得到了解决方案，代码不是 angular 代码，代码是非 angular，所以 angular 不知道更新视图，所以 UI 没有更新。

所以非angular代码可以使用Zone.js

更新

下面的代码，我用于更新我的代码：

 this.zone.run(() => {
          this.otp = sms.body.substr(20, 4);
          this.stopSMS();
        });

完整代码如下：

 document.addEventListener('onSMSArrive', function(e){
      var sms = e.data;

     console.log("received sms "+JSON.stringify( sms ) );

     if(sms.address=='HP-611773') //look for your message address
     {
        this.zone.run(() => {
          this.otp = sms.body.substr(20, 4);
          this.verifyOTP();
        });
     }
    });

现在UI更新的很好

自动接收 OTP 并验证 OTP，UI 未更新

Automatically receive OTP and Verify the OTP, UI is not Updating

android

ionic-framework

ionic4