javascript - Angular 6 - 在将 ngIf 设置为 true 时等待元素加载到 *ngIf 中

Question

我正在使用 Angular 6。

我有一个如下所示的 html。

<div class="catalog-menus-subnav-wrapper"
                     *ngIf="showMenus">
 <div class="hidden-elem">
 </div>
</div>

此处，showMenus 默认为 false，并在单击同一页面中的按钮时将其设置为 true。

现在，我试图在将 showMenus 设置为 true 后立即以 Angular 获取此 div，但有时由于 dom 未完全加载而无法获取。

public onClick(event) {

      this.showMenus= true;

      const item= $(event.currentTarget);
      const wrapper = item.next('.catalog-menus-subnav-wrapper');
      const height= item.closest('.hidden-elem').height();

  }

此处，item.next('.catalog-menus-subnav-wrapper') 有时不返回值，因为在执行此操作时 DOM 加载未完成。将 showMenus 设置为 true 后，有什么方法可以等待 DOM 加载吗？或者，还有其他解决方法吗？

谢谢

Answer 1

尝试使用hidden，如果你使用ngIf那么它会从DOM中移除元素

试试下面这个，

在.html

<div class="catalog-menus-subnav-wrapper" [hidden]="!showMenus">
   <div class="hidden-elem">
   </div>
</div>