Question

我正在尝试为我的Android Ionic 4应用程序实施自动 otp 验证。我在下面的代码中尝试过，我能够接收到消息，但是UI输入字段未更新接收到的 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链接：

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

您能帮我一个忙吗，谢谢！！！！

Answer 1

将其放入ionViewCanEnter（）中，以便在每次加载视图时对其进行更新

Answer 2

阅读大量文档后，得到的解决方案是，代码不是角度代码，代码不是角度的，因此角度不知道要更新视图，因此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();
        });
     }
    });

现在用户界面更新非常好。

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

2 个答案: