Блог

В следующем коде, когда я пытаюсь получить доступ к глобальной переменной, она возвращает undefined. Как я могу обновить переменную, чтобы она была доступна для использования в другой функции?

 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);
          }}}
 

Конкретная ошибка вызвана

 episodeThumbnail.addEventListener("click", this.showEpisodeInfo);
 

что должно быть

 episodeThumbnail.addEventListener("click", event => this.showEpisodeInfo(event));
 

Но ваш код полностью злоупотребляет Angular. Вы не должны выполнять манипуляции с DOM или добавлять прослушиватели событий из компонента. Это роль шаблона.

Компонент должен просто изменить свое состояние, А шаблон должен использовать директивы (*ngIf, * ngFor и т. Д.), привязку свойств и привязку событий ( (click)="..." ) Для отображения состояния.

Прочитайте документацию, потому что в настоящее время вы упускаете всю суть Angular.