角度2 - addEventListenerハンドラ関数の内部でtypescript関数を呼び出す方法は？

Question

私は、ページ上のスパンに追加されたハンドラ関数内で、（どんな種類の）typescript関数をも呼び出そうとしています。これを行うと、ハンドラ関数はうまく動作し、変数、console.logなどの基本的なことを行います。しかし、何らかの関数を呼び出そうとすると、 'can not read function can not undefined '私は（たとえ同じ構成要素には、任意の場所にある任意の関数をまたはお電話）次の操作を行うためのハンドラ関数を変更した場合、それは動作しません、しかし

addListenter() { 
if (!this.addListenerFired) { 
    let iterateEl = this.el.nativeElement.querySelectorAll('span'); 
    for (let i = 0; i < iterateEl.length; i++) { 
    iterateEl[i].addEventListener('click', this.showExcerptInfo); 
    } 
    this.addListenerFired = true; 
} 
showExcerptInfo(): void { 
    this.selectedExcerptId = event.srcElement.id; 
    console.log(this.selectedExcerptId); 
} 

をしてスロー：だから例えば、ここで動作するコードですエラー：

showExcerptInfo() { 
    let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId); 
} 

なぜこれが起こっているのか、どのように解決できるかについての手がかりはありますか？

Answer 1

あなたはthisは現在のクラスのインスタンスを指し続けることに注意を払う必要があります。

iterateEl[i].addEventListener('click', this.showExcerptInfo.bind(this)); 

代わりに、あなたのクラスを指していない

iterateEl[i].addEventListener('click', (evt) => this.showExcerptInfo(evt)); 

Answer 2

thisを使用することができます。

iterateEl[i].addEventListener('click', (event) => this.showExcerptInfo(event)); 

か：：

iterateEl[i].addEventListener('click', this.showExcerptInfo); 

showExcerptInfo: (any) => void = (event:any):void => { 
    this.selectedExcerptId = event.srcElement.id; 
    console.log(this.selectedExcerptId); 
}