Javascript 需要加载innerHTML，然后运行函数

我试图在

ngOnInit

上调用此

highlight（）

，但我遇到了以下错误：

错误类型错误：无法读取null的属性'innerHTML'

在
ngOninit
中，我有

this.annotationSub = this.annotationService
      .getWordUpdateListenerTwo()
      .subscribe((theHardWords: ComplexWord[]) => {
        this.thewords = [];
        this.theHardWords = theHardWords;
        this.theHardWords.map(word => {
          this.thewords.push(word.word);
          this.wordWithAnnotation.push(word);
        });
      });

this.postsSub = this.postsService
     .getPostUpdateListenerTwo()
     .subscribe((posts: Post[]) => {
            this.posts = posts;
            this.posts.map(post => {
              if (post.id === this.id) {
                 this.postIWant = post.fileText;
              }
            });
    });
    this.highlight(this.thewords); 

这将选择帖子，然后显示如下：

我的HTML：

<div id="scrollable">
    {{ postIWant }}
</div>

如前所述，如果我加载页面并按下按钮触发
highlight（），它会起作用，但我希望它运行该功能并突出显示单词，而无需单击任何内容。有人有什么想法吗？谢谢

（我使用的是角度）。
我可以看出，你没有正确地同步你的观测值。我更愿意将
annotationService
和
postsService
中的观察值结合起来。然后订阅并执行
this.highlight（this.thewords）

以下是示例（在RxJS 6中）：

在上面的示例中，我结合了
注释$
和
发布$
，这意味着订阅将在最新的观测值上执行。然后我猜你必须完成你需要的逻辑，最后你可以执行
highlight（）

但是，上述方法不能确保在组合可观测完成之前加载
scroblable
div。要监听特定DOM元素上的更改，您可以使用
MutationObserver
API，并创建可添加到
scrollable
div的自定义指令。请参阅以下文章

您还可以尝试通过ViewChild访问HTML。请在下面的stackoverflow问题中查看更多信息：
您的
文档.getElementById（'scrollable'）调用返回null

这就是为什么您不应该在Angular中与DOM交互。Angular将其完全解耦，并为您提供一个与之交互的API

在解析组件的
输入和
输出后，调用
ngonit
<附加视图模板并解析模板变量后，将调用code>ngAfterViewInit

Angular中没有在组件的标记附加到DOM后触发的生命周期挂钩。
有很多方法可以通过Angular而不是DOM查询获得元素，但这里不需要任何方法

只需将其绑定到标记中：

component.html：

<div id="scrollable">
  <a class="clickable inline-styling-is-bad" style="background-color: yellow; text-decoration: underline;">
    {{ postIWant }} 
  </a>
</div>


{{postIWant}}

如果您需要一系列基于数组的重复元素…这似乎很明显，但只需使用
*ngFor

你观察到的流也有一些问题，但这超出了本主题的范围。
您需要在订阅函数中设置突出显示，以便在加载数据时执行，或者添加一个可观察对象，以检查何时加载数据，然后突出显示。我尝试创建一个可观察对象，以便在将值放入
this.postIWant
中时触发此操作这不是问题所在。问题似乎是，即使它在刷新页面时具有值，也没有innerHTML文本，因此它在瞬间为null，并返回错误@Bertmauraudo
scrolable
div取决于来自
AnnotationService
或
postsService
的数据？@kat1330来自
postsService
的是：
{post.header}{postWant}
和建议。。。考虑使用<代码> VIEWHODS代替文档对象及其属性/方法（例如
getElementById
。它在Angular中工作得更好。感谢@kat1330的回答。我现在正在尝试实现这一点，看看是否可以实现。出现此错误，正在尝试更改类型，但运气不佳：“Observable”类型的参数不能分配给“OperatorFunction”类型的参数。“Observable”类型提供签名不匹配”（来源：可观察）：Observable.您可以强制转换到
任何
，或者您是否从
rxjs/operators
导入了
CombineTest
？是的，我是从rxjs/operators导入的，但是如果这不能使它等待DOM加载，我仍然会得到相同的错误。因此我必须找出如何等待DOM加载。@KAT1330请查看我的updates。您可以使用MutationObserver API实现自定义指令，或者使用ViewChild访问DOM。我不太确定您在标签上做了什么？我有一篇文章和一组单词，我从数据库中提取，函数会获取这些单词并为我高亮显示，然后将它们放入可单击的标签中。这并不能解决这个问题？May可能我还不理解，因为我是一个新手。如果你想在文章中看到的文本是一个字符串，你可以在这里通过模板绑定将它绑定到标记。
const annotation$ = this.annotationService.getWordUpdateListenerTwo();
const posts$ = this.postsService.getPostUpdateListenerTwo();


annotation$.pipe(combineLatest(posts$, (annotations, posts) => ({annotations, posts}))).subscribe((annotations, posts) => {

 // Do your logic here and after execute highlight()

 this.highlight(thewords);
});

<div id="scrollable">
  <a class="clickable inline-styling-is-bad" style="background-color: yellow; text-decoration: underline;">
    {{ postIWant }} 
  </a>
</div>