从外部源获取的HTML中的getElementByClass - ＆gt;未定义

Question

我使用HTTP get从外部源获取html块并使用innerHTML函数将其插入到我的应用程序中。我试图通过其类名使用getElementsByClassName访问div类。这就是响应的样子：

当我尝试使用索引访问列表中的一个对象时（结果[0]），我得到了未定义的回复。有谁知道为什么会这样？

谢谢！

更新

我发现了问题所在。在我尝试访问之前，html尚未正确初始化。

这是我从我的服务类中获取html块的函数。

  getNewsFeed(){
      this.homeService.getNewsFeed()
      .subscribe(res =>
        this.news_block = res,
        error=>this.news_feed_error=true,
        ()=>  this.news_feed_error=false
      ); 

getNewsfeed从以下执行：

ngOnInit(){
      this.getNewsFeed();
}

我在ngAfterViewInit

中运行getElementByClassName

ngAfterViewInit(){
      console.log(document.getElementsByClassName("overlayWrapper"));

    }

我将getNewsFeed（）的答案加载到我的选择器中：

<div *ngIf="news_block" [innerHtml]="news_block"></div>

Answer 1

observable返回数据异步，然后执行传递给.subscribe()的回调。

无法保证何时或即使数据到达。没有Angular回调可以保证getNewsFeed()已经返回任何结果。

不是最佳的，但应该是一种改进：

getNewsFeed(){
  this.homeService.getNewsFeed()
  .subscribe(res => {
      this.news_block = res;
      setTimeout(() => checkElement();
    },

    error=>this.news_feed_error=true,
    ()=>  this.news_feed_error=false
  ); 
}

checkElement(){
  console.log(document.getElementsByClassName("overlayWrapper"));

}

这样，至少可以确保在调用getElementsByClassName()时实际收到HTML。