Bootstrap 导航栏下拉菜单仅在以角度刷新页面时显示答案

【问题标题】：Bootstrap navbar dropdown is showing only when refresh the page in angularBootstrap 导航栏下拉菜单仅在以角度刷新页面时显示
【发布时间】：2021-01-13 06:54:43
【问题描述】：

在我的 Angular 应用程序中，我使用引导程序创建了带有导航链接（主页、关于、报告、配置文件）的仪表板页面。

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

.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>

现在我想在不刷新页面的情况下显示数据有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular typescript twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

【讨论】：

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