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

Question

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

functions

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

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

I have a couple of posts (title, author, content, etc.) I'd like to show button Show more if postContentDiv is higher than 50px. The problem is this line:

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

is being run before this line:

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

effect? getPostContentHeight checks #postContentDiv height before it fills up by post.content . All works fine when I start on the component where the list is or when I refresh the page but it doesn't work when I change to another component and go back.

## Example ##

In short: getPostContentHeight runs too fast, before another function which modifies getPostContentHeight argument.

Component X is a component which has the posts list and view. Component Y is another component just for help.

start at http://localhost:4200/X - I see Show more buttons. When I change now to component Y and then again to X, there is no Show more buttons. They appear after a few seconds when Angular does second check run.

Answer 1

I suggest you to google Promises as that's what will allow you to keep a function from starting until anything that has to happen before happened (and completely).

So you'll have something like:

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