Angular组件中的实例变量不能在名为函数的setInterval中工作

Question

My Angular 13组件应该在播放音频文件时显示进度条。

我试图在一个用setInterval((调用的函数中，将进度条值(从0运行到1(增加一个计算出的间隔，使其每1/100秒运行一次。

被调用的函数是：progressTimeBar((。

progressTimeBar(interval: number) {    
this.p_bar_value = Number(this.p_bar_value + interval);
console.log('Advanced p_bar_value: ', interval, this.p_bar_value);    
}

组件的p_bar_value实例变量无法从progressTimeBar中正确访问。控制台日志将其呈现为NaN(这就是为什么我试图强制Number((进行计算，但没有成功。总是NaN(。控制台：

Advanced p_bar_value:  0.002 NaN

顺便说一句，还有一个名为interval的实例变量，但在该函数中使用this.interval直接访问它会产生相同的结果-NaN。这就是为什么我现在把它当作一个论点。但是我必须推进实例p_bar_value，因为它绑定到进度条的模板值！

这是组件：

import { Component, Input } from '@angular/core';
import { VoiceService } from "../../services/voice.service";
import { StreamState } from "../../Utilities/stream-state";
@Component({
selector: 'app-audioplayer',
templateUrl: './audioplayer.component.html',
styleUrls: ['./audioplayer.component.scss'],
providers: [VoiceService]
})
export class AudioplayerComponent {
@Input() url: string;
audioDurationDisplay: string;
state: StreamState;
p_bar_value: number = 0;
totalDuration: number = 0;
playingNow: boolean;
timerHandle: any;
interval: number = 0;
loaded: boolean = false;
constructor(public audioService: VoiceService) { 
// listen to stream state
this.audioService.getState().subscribe(state => {
this.state = state;
console.log('StreamState in Audioplayer updated: ', this.state);
if (this.state.duration) {
this.totalDuration = this.state.duration;
this.interval = 0.01 / this.totalDuration;    
console.log('Updated TotalDuration from state: ', this.totalDuration);
}
if (this.state.ended) {
clearInterval(this.timerHandle);
this.p_bar_value = 0;
}
});
}

ngOnChanges() {
if(this.url) {
console.log('this.url received: ', this.url);
this.CalcTotalDuration();
this.loaded = true;
}

}
CalcTotalDuration() {
const durationRaw = this.url.slice(this.url.lastIndexOf(".")-4, this.url.lastIndexOf("."));
this.audioDurationDisplay = durationRaw.slice(0, 1) + ":" + durationRaw.slice(-2);
const arrRaw = this.audioDurationDisplay.split(":");
this.totalDuration = (parseInt(arrRaw[0]) * 60) + (parseInt(arrRaw[1])); //Total in seconds
this.interval = 0.01 / this.totalDuration;
console.log('Calculated TotalDuration: ', this.totalDuration);
}

playController() {
console.log('Calling progressTimeBar. totalDuration: ', this.totalDuration, Number.isNaN(this.totalDuration));
console.log('Calling progressTimeBar. interval: ', this.interval, Number.isNaN(this.interval));
console.log('Calling progressTimeBar. p_bar_value: ', this.p_bar_value, Number.isNaN(this.p_bar_value));
clearInterval(this.timerHandle);
this.timerHandle = setInterval(this.progressTimeBar, 10, this.interval);
if (this.state.canplay) {
this.play();
} else {
this.playStream();
}

}

playStream() {
this.audioService.playStream(this.url).subscribe(events => {
this.playingNow = true;
});
}
pause() {
this.audioService.pause();
clearInterval(this.timerHandle);
this.playingNow = false;
}
//Restart playing again (resume after pause)
play() {
this.audioService.play();
this.playingNow = true;
}

stop() {
this.audioService.stop();
clearInterval(this.timerHandle);
this.playingNow = false;
this.p_bar_value = 0;
}

progressTimeBar(interval: number) {
this.p_bar_value = Number(this.p_bar_value + interval);
console.log('Advanced p_bar_value: ', interval, this.p_bar_value);
}
ngOnDestroy() {
clearInterval(this.timerHandle);
}
}

我缺少什么

Answer 1

您能尝试将progressTimeBar声明为箭头函数吗？我们将其用作回调，并且我们失去了this作用域。

任一

this.timerHandle = setInterval((interval) => { this.p_bar_value += interval }, 10, this.interval);

或

const progressTimeBar = (interval: number) => {
this.p_bar_value = Number(this.p_bar_value + interval);
}
this.timerHandle = setInterval(progressTimeBar, 10, this.interval);

应该工作