Question

在angular 4项目中使用materialize css，我在导航栏中使用了以下代码进行下拉列表。在index.html中添加了js代码，如下所示，

$(document).ready(function() {
    $(".dropdown-button").dropdown();
      $('.dropdown-button2').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: ($('.dropdown-content').width()*3)/2.5 + 5, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button

  });
 });

模板代码 - monitoring.ts

<nav class="cyan  lighten-1">
   <div class="nav-wrapper">
      <a href="#" class="brand-logo" style="margin-left: 12px;font-size: 27px;">  Enterprise Data Management</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down" style="font-size: 13px !important;">
         <li ><a class="dropdown-button drop-size"  data-activates="botMenu" data-belowOrigin="true">Bots<i class="material-icons right">arrow_drop_down</i></a></li>
         <li><a class="dropdown-button drop-size"  data-activates="monitoringMenu" data-belowOrigin="true">Monitoring<i class="material-icons right">arrow_drop_down</i></a></li>
         <li><a class="dropdown-button"  data-activates="userMenu" data-belowOrigin="true"><i class="material-icons left">perm_identity</i>User<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
   </div>
</nav>

<!-- Dropdown Structure -->
<ul id="userMenu" class="dropdown-content">
   <li><a href="#!">one</a></li>
   <li><a href="#!">two</a></li>
</ul>
<ul id="botMenu" class="dropdown-content">
   <li><a (click)="showDialog = !showDialog" style="margin-top: -3px;"> Suspicious Bot</a></li>
</ul>
<ul id="monitoringMenu" class="dropdown-content">
   <li><a class='dropdown-button2 d' href='#' data-activates='vehicleMenu' data-hover="hover" data-alignment="left">Vehicle</a></li>
   <li><a class='dropdown-button2 d' href='#' data-activates='deviceMenu' data-hover="hover" data-alignment="left">Device</a></li>
</ul>
<ul id='vehicleMenu' class='dropdown-content'>
     <li><a routerLink="/bsm" routerLinkActive="active"> BSM</a></li>
   <li><a routerLink="/bluetoad" routerLinkActive="active"> BlueTOAD</a></li>
   <li ><a routerLink="/sensors" routerLinkActive="active">SBV</a></li>
    <!--<li>SBV</li>-->
</ul>
<ul id='deviceMenu' class='dropdown-content'>
    <li ><a routerLink="/sensors" routerLinkActive="active">Environmental Sensors</a></li>
</ul>

当我加载应用程序9中的10次下拉列表没有加载时，我搜索了相关的文档，但仍然无法修复它。不仅这一个，多重选择也不能一致地工作。这是一个实现问题吗？或使用物化的角度有任何问题???

物化导航栏下拉列表显示不一致

0 个答案: