Angular 仅当以角度刷新页面时，才会显示引导导航栏下拉列表

在我的angular应用程序中，我使用引导创建了带有导航链接（主页、关于、报告、概要）的仪表板页面

对于报告和配置文件链接，我已经使用引导创建了带有悬停效果的下拉菜单。但是悬停效果的数据只有在以角度刷新页面时才会显示

.component.html

<li class="nav-item dropdown dmenu">
  <a routerLink="{{router.url}}" class="nav-link dropdown-toggle" href="#" id="col" data-toggle="dropdown"><i class="fa fa-flag"></i> Report</a>
  <div class="dropdown-menu sm-menu" style="width: 340px;">
    <form name="forms">
      <label style="margin-left: 5px;">From date:</label><label style="margin-left: 97px;">To date:</label><br />
      <input type="date" style="width: 150px; margin-left: 5px;" id="name" required ngModel name="name" #name="ngModel" />&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
      <input type="date" style="width: 150px;" id="date02" required ngModel name="date02" #date02="ngModel" />&nbsp;

      <select data-placeholder="Select..." multiple style="width: 150px; margin-left: 15px;">
        <option value=""></option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
        <option>Option 6</option>
        <option>Option 7</option>
        <option>Option 8</option>
      </select>
      <br />
      <br />
      <button type="submit" class="btn btn-primary btn-center" style="margin-left: 130px;">Show Report</button>
    </form>
  </div>
</li>

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8




展示报告

---

现在我想在不刷新页面的情况下显示数据。有人能帮我吗。

可能与li元素有关，请尝试将下拉列表放在单独的div中，如下所示：

<li class="nav-item">
  <div class="dropdown dmenu">
     <a routerLink="{{router.url}}" ... // rest of you code
  </div>
</li>

我试过了，虽然它不工作，但只有在我刷新页面时它才工作。但我不想刷新页面。