Question

我在html中运用{{exercise.name}}。一开始它没有问题。

但正如您在下面所见，我希望每1秒有exercise.time值减去。

但是我无法在setInterval()中访问锻炼对象。我记录了它但只出现了null。我如何访问它并每秒给出减号？（应显示最小编号）。

export class ExercisePage {
  exercise:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log(this.navParams.get("data"));
    this.exercise=this.navParams.get("data");
    console.log(this.exercise);
    console.log("시간2 : "+this.exercise.time);
    var time=this.exercise.time;
    setInterval(function(){
      time--;
      console.log(this.exercise);
    },5000)
    console.log("22");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ExercisePage');
  }
}

HTML

<p>{{exercise.time}}</p>

我改了一点添加了reduce功能，但它既没有工作也没有。

export class ExercisePage {
  exercise:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log(this.navParams.get("data"));
    this.exercise=this.navParams.get("data");
    console.log(this.exercise);
    console.log("시간2 : "+this.exercise.time);
    var time=this.exercise.time;
    setInterval(function(){
      time--;
      this.reduce(time);
    },5000)
    console.log("22");
  }

  reduce(time){
    console.log("reduce : "+time);
    console.log(this.exercise.time);
    this.exercise.time=time;
  }
}

Answer 1

您应该使用Arrow functions。通过使用箭头函数， this 属性不会被覆盖，仍会引用组件实例（否则，this关键字指向内部函数，组件的方法和变量没有在其中定义）：

// ...
setInterval(() => {
  time--;
  console.log(this.exercise); // Now it should work! :)
}, 5000)
// ...

Answer 2

如果您不想使用箭头功能作为sebaferreras建议您可以选择使用此方法：

// ...
var tthis = this; // var that = this if you prefer
setInterval(function() {
  time--;
  console.log(tthis.exercise); // It should also work! ;)
}, 5000)
// ...

我建议您使用箭头功能，因为它现在是Javascript和Typescript中的标准（我认为）：）

Ionic2的范围有何不同？

2 个答案: