在下面的代码中,当我试图访问全局变量时,它返回未定义的。如何更新变量以使其可用于另一个函数?
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);
}}}
发布于 2019-04-15 01:54:37
这个特定的bug是由
episodeThumbnail.addEventListener("click", this.showEpisodeInfo);
这应该是
episodeThumbnail.addEventListener("click", event => this.showEpisodeInfo(event));
但是你的代码完全误用了Angular。您不应该从组件中进行DOM操作,也不应该添加事件侦听器。这就是模板的作用。
组件应该只修改它的状态,模板应该使用指令(*ngIf、*ngFor等)、属性绑定和事件绑定((click)="..."
)来显示状态。
请阅读the documentation,因为您目前错过了Angular的全部要点。
https://stackoverflow.com/questions/55677811
复制相似问题