Ionic2 中的范围不同吗?

Question

我在html中使用练习，就像{{exercise.name}}一样。 一开始没有问题。

但正如你在下面看到的，我希望每 1 秒减去exercise.time值。

但是我无法访问setInterval()中的锻炼对象。 我记录了它，但只出来为空。 我如何访问它并每秒减去？ (应显示减号(。

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>

我更改了一些添加减少功能，但它也不起作用。

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 函数用作 sebaferreras 建议的函数，则可以使用此方法：

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

我建议你使用箭头函数，因为它现在是Javascript和Typescript的标准:)

Answer 2

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

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