Ionic 2 setInterval 变量范围答案

【问题标题】：Ionic 2 setInterval variable scopeIonic 2 setInterval 变量范围
【发布时间】：2017-05-29 20:53:34
【问题描述】：

我正在使用 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”，但不会将文本更新为“Updated Text”。控制台正确显示输出。

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

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

和

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

【问题讨论】：

标签： angular ionic2

【解决方案1】：

这是关于 Angular 2 中的区域的内容。这已经讨论过here 你可以通过注入 NgZone 的对象并调用它的 run() 方法来修复它

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

【讨论】：

感谢您的回复。我想我必须包含另一个文件才能使 ngZone 工作。它没有开箱即用。我意识到我已经在前一个窗口中获得了所需的 gps 坐标（用于生成地图），所以我只是将它们存储起来并将它们带到这个页面，这否定了我的问题。它也以这种方式加快了应用程序的速度。
你必须在你的组件中导入它，然后在构造函数中注入它。

【解决方案2】：

您可以简单地绑定 this，而不是使用 NgZone，如下所示：

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

【讨论】：