Question

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

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

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

现在我要显示数据但不刷新页面。任何人都可以帮我解决这个问题。

Answer 1

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

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

Bootstrap导航栏下拉列表仅在按角度刷新页面时显示

1 个答案: