Javascript 错误类型错误：无法读取属性'；音频播放器'；未定义的

我正在尝试创建与文本的音频同步。这就是我所想的，但是我得到了这个错误“无法读取

未定义的
的属性
audioPlayer
”。我想知道我怎样才能让它工作




从“@angular/core”导入{AfterViewInit，Component，ElementRef，OnInit，ViewChild}；
@组成部分({
选择器：“应用程序启动程序”，
templateUrl:“./starter.component.html”，
样式URL:['./starter.component.scss']
})
/**
*公用电起动器组件
*/
导出类启动器组件实现OnInit，AfterViewInit{
//面包屑物品
面包屑：数组；
@ViewChild（“音频文件”）音频播放器：ElementRef；
构造函数（）{}
恩戈尼尼特（）{
this.breadCrumbItems=[{label:'Utility'}，{label:'Starter Page'，active:true}]；
}
ngAfterViewInit（）{
console.log（this.audioPlayer.nativeElement）；
这个，就一个；
}
就一个{
var subtitles=document.getElementById（“subtitles”）；
var syncData=[
{“结束”：“0.2”，“开始”：“0.0”，“文本”：“I”}，
{“结束”：“0.700000000000001”，“开始”：“0.2”，“文本”：“相信”}，
{“结束”：“0.9”，“开始”：“0.70000000000001”，“文本”：“你”}，
{“end”：“1.2”，“start”：“0.9”，“text”：“just”}，
{“结束”：“1.4”，“开始”：“1.2”，“文本”：“谈话”}，
{“结束”：“1.700000000000002”，“开始”：“1.4”，“文本”：“无意义”}
];
console.log（syncData）
createSubtitle（）；
函数createSubtitle（）
{
var元素；
对于（var i=0；i
在
createSubtitle（）
函数中使用
syncData.forEach（）
尝试将
forEach
回调中的函数声明转换为箭头函数
，因为您使用的是
function
关键字来创建回调函数，而不是箭头函数。这样一来，您就失去了
此
上下文。关于这个问题有很多问题，但很难找到，因为每个人都以不同的方式经历这个问题。基本上，不要在类中使用
函数
关键字：

this.audioPlayer.nativeElement.addEventListener("timeupdate", (e) => {
  syncData.forEach((element, index, array) => {
    var currTime = this.audioPlayer.nativeElement.currentTime;
    console.log(currTime)
  });
});

但是，使用角度事件绑定可能会更好：

<audio #audiofile src="/assets/song/test2f.mp3" controls (timeupdate)="onTimeUpdate(e)">

onTimeUpdate(event): void {
  this.syncData.forEach((element, index, array) => {
    const currTime = (event.target as HTMLAudioElement).currentTime;
    console.log(currTime);
  });
}


onTimeUpdate（事件）：无效{
this.syncData.forEach（（元素、索引、数组）=>{
const currTime=（event.target作为HTMLAudioElement）.currentTime；
console.log（currTime）；
});
}

<audio #audiofile src="/assets/song/test2f.mp3" controls (timeupdate)="onTimeUpdate(e)">

onTimeUpdate(event): void {
  this.syncData.forEach((element, index, array) => {
    const currTime = (event.target as HTMLAudioElement).currentTime;
    console.log(currTime);
  });
}