如何强制某个功能等待某些事情发生？

Question

<div *ngFor="let post of posts">
  <div [innerHtml]="getPostContent(post.content)" #postContentDiv></div>
  <button *ngIf="getPostContentHeight(postContentDiv)">Show more</button>
</div>

职能

getPostContent(content: any): any {
  return this.sanitizer.bypassSecurityTrustHtml(content);
}

getPostContentHeight(postDiv: any): boolean {
  return postDiv.offsetHeight > 50;
}

我有postContentDiv文章（标题，作者，内容等），我想显示一个按钮，如果postContentDiv高于50px，则Show more 。 问题是这一行：

<button *ngIf="getPostContentHeight(postContentDiv)">Show more</button>

正在此行之前运行：

<div [innerHtml]="getPostContent(post.content)" #postContentDiv></div>

影响？ getPostContentHeight在由post.content填充之前检查#postContentDiv高度。 当我从列表所在的组件开始或刷新页面时，一切都正常，但是当我切换到另一个组件并返回时，该组件不起作用。

##示例##

简而言之：在另一个修改getPostContentHeight参数的函数之前， getPostContentHeight运行得太快。

组件X是具有帖子列表和视图的组件。 组件Y是另一个仅用于帮助的组件。

从http://localhost:4200/X -我看到Show more按钮。 当我现在更改为组件Y，然后再次更改为X时，没有Show more按钮。 几秒钟后，当Angular执行第二次检查时，它们就会出现。

Answer 1

我建议您使用Google Promises，因为这将使您可以阻止函数启动，直到一切（完全发生）之前必须发生的一切。

因此，您将获得以下内容：

 new Promise(etPostContent(post.content)).then(getPostContentHeight(postContentDiv));