Question

我正在用Ionic 2编写一个应用程序并取得了很好的进展，但我只是挂了一些我认为可能是一个简单修复的东西。

屏幕上有文字，5秒后我想更新屏幕上的文字。我似乎无法访问setInterval函数中的变量。

constructor(public nav: NavController, private navParams: NavParams, private getserver: GetServerService, storage: Storage) {
    this.storage = storage;

    this.storage.get('userAuth').then((name) => {
      if(name.id === undefined) {
          this.nav.setRoot(LoginPage);  //kick back to login if no userdata
      }else{

          let options = {timeout: 120000, enableHighAccuracy: true};
          navigator.geolocation.getCurrentPosition((position) => {

            this.driverStatus = 'hi';  

            setInterval(()=> {
                this.driverStatus = 'Updated Text';
            }, 2000);

          },
          (error) => {
            console.log(error);
          },
          options
        );  
      }
    }); 

  }

}

当我运行应用程序时，它显示文本“Hello”但从未将文本更新为“更新文本”。控制台正确显示输出。

我尝试了Ionic2 function setInterval can't get a parameter的建议，但这些建议也没有用。我的其他失败尝试如下。

var that = this;
setInterval(function() {
   that.userText = 'Updated Text';
}, 2000);

和

setInterval(()=> {
    this.userText = 'Updated Text';
}, 2000);

Answer 1

这是来自Angular 2的区域。这已经讨论过here 你可以通过注入一个NgZone的对象并调用它的run（）方法

来修复它

setInterval(()=> {
   this.ngZone.run(() => {
      this.userText = 'Updated Text';
   });
}, 2000);

Answer 2

代替使用NgZone，您可以按以下步骤简单地 bind this ：

    setInterval(function () {
        that.userText = 'Updated Text';
    }.bind(this), 1000);

Ionic 2 setInterval变量范围

2 个答案: