1

我正在尝试为我的 Ionic 4 App for Android实施自动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"值没有更新。

我得到以下错误：

像这样出错

我遵循以下 GitHub 链接：

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

你能帮我一个人吗，在此先感谢！！！！

4

2 回答 2

1

把它放在 ionViewCanEnter() 中，这样每次视图加载时它都会更新

于 2018-08-14T18:08:10.673 回答
0

在阅读了很多文档后，我得到了解决方案，代码不是角度代码，代码是非角度的，所以角度不知道更新视图，所以 UI 没有更新。

所以非角度代码可以使用更新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 更新得很好。

于 2018-08-17T17:54:17.277 回答