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

Question

我正试图为我的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"值没有更新。

我正在犯以下错误：

犯了这样的错误

我遵循下面的GitHub链接：

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

你能帮我一个人吗，谢谢提前！

Answer 1

在我阅读了很多文档之后，我得到了这样的解决方案:代码不是角码，代码是非角的，所以角不知道更新视图，所以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更新得非常好。

Answer 2

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