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

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

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

正在此行之前运行：

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

效果？ getPostContentHeight在#postContentDiv填满之前检查post.content身高。当我开始列表所在的组件或刷新页面时，一切正常，但当我更改为另一个组件并返回时它不起作用。

##示例##

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

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

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

Answer 1

我建议你谷歌Promises，因为它可以让你保持一个功能从启动到发生之前发生的任何事情（并且完全）。

所以你会有类似的东西：

＆＃13;

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

＆＃13;

如何强制函数等到事情发生？

##示例##

1 个答案: