问Angular 7:更新全局变量的问题

EN

episodes: EpisodeModel[] = [];

ngAfterViewInit(): void {
    this.episodesService.getAllEpisodes().subscribe(data => {
        this.episodes = data;
        console.log(this.episodes); // shows array
        this.showEpisodes(); // function to display episodes on the page - sets event listener ('click', this.showEpisodeInfo) - works
    }
}

    showEpisodeInfo(event) {
        console.log(event); // works
        console.log(this.episodes); // returns undefined
    }

     showEpisodes(): void {
        let episodes = this.episodes;
        let document = this.shows.nativeElement.contentDocument;
        let genres = Array.from(document.getElementsByClassName('genre')[0].getElementsByTagName('path'));
        for (let i in episodes) {
          let episode = <any>episodes.find((e: any) => {
            return e.getAttribute('title') == episodes[i].genre;
          });
          let episodesGroup = document.getElementById('episodes');
          if (episodes[i].episodeType.toLowerCase() === 'fantasy') {
            let episode = document.createElementNS(svgNS, 'svg');
            episode.setAttributeNS(null, 'style', 'overflow: visible;')
            let episodeThumbnail = document.createElementNS(svgNS, 'circle');
            episodeThumbnail.setAttributeNS(null, 'class', 'episode');
            episodeThumbnail.setAttributeNS(null, 'fill', 'black');
            episodeThumbnail.setAttributeNS(null, 'overflow', 'visible');
            episodeThumbnail.addEventListener("click", this.showEpisodeInfo);
            let episodeTitle = document.createElementNS(svgNS, 'title');
            episodeTitle.innerHTML = episodes[i].episodeTitle;
            episodeThumbnail.appendChild(episodeTitle);
            episode.appendChild(episodeThumbnail);
            episodesGroup.appendChild(episode);
          }}}