更新组件UI时出现rxjs订阅问题

Question

我目前正在了解rxjs Observable、Observer和Subscription。为了理解这一点，我编写了一个示例代码，用于用1秒间隔的随机数更新UI。我的目标是从一个可观察到的数据中更新多个组件。但是，我一直停留在组件变量不与订阅的下一个观察者一起更新的地方。我的代码如下，

https://stackblitz.com/edit/angular-ivy-z11va4?file=src/app/app.component.ts

当我启用this.updateNumber(num)时，它表示方法不可用。我认为问题出在this这个关键词上。如何引用next()中的类变量和方法？

this.number1 = 0;
clickSix() {
this.number1 = 1;

const randomGeneratorOnIntervalObservable = new Observable(
this.obsCheckService.randomGeneratorOnIntervalSubscription
);

randomGeneratorOnIntervalObservable.subscribe({
next(num) {
console.log(num);
// this.updateNumber(num);
this.number1 = num;
},
complete() {
console.log('Finished sequence');
},
});
this.number1 = 2;
}

updateNumber(num: number) {
this.number1 = num;
}

Answer 1

使用箭头函数来解决这个问题：

randomGeneratorOnIntervalObservable.subscribe(
(num) => {
console.log(num);
this.updateNumber(num);
this.number1 = num;
},
(error) => {
console.log(error);
},
(complete) => {
console.log('Finished sequence');
});
this.number1 = 2;
}

更新：

randomGeneratorOnIntervalObservable.subscribe({
next: (num: number) => {
console.log(num);
this.updateNumber(num);
this.number1 = num;
},
error: (error: Error) => {
console.log(error);
},
complete: () => {
console.log('Finished sequence');
}});
this.number1 = 2;
}

注意：与常规函数不同，箭头函数没有自己的this。箭头函数内部this的值在函数的整个生命周期中保持不变，并且始终绑定到最近的非箭头父函数中的this值。

参考文件https://betterprogramming.pub/difference-between-regular-functions-and-arrow-functions-f65639aba256