css ng-bootstrap下拉菜单似乎不适用于 *ngFor

jogvjijk 于 2023-02-26 发布在 Bootstrap

关注(0)|答案(2)|浏览(209)

下拉菜单应该是动态填充语言列表的，我尝试使用ngFor来实现这个功能，但是除了第一个列表项之外，其他列表项都没有出现在下拉菜单中：

<nav class ="navbar navbar-light bg-light fixed-top">
  <div *ngIf="data.enableLanguageList && data.languageList?.length > 0" class="row">
    <div ngbDropdown class="col d-inline-block">
      <button ngbDropdownToggle 
              class="btn btn-success btn-lg dropdown-toggle" 
              id="languageSelect">
        <strong> Lang - {{ data.currentLanguage }} </strong>
      </button>
      <div ngbDropdownMenu 
           *ngFor="let lang of data.languageList;" 
            class="dropdown-menu" 
            aria-labelledby="languageSelect">
        <button ngbDropdownItem 
                class="dropdown-item" 
                [ngClass] = "[lang === data.currentLanguage ? 'active' : '']" 
                (click) = "setLanguage(lang)">
             <h5> <strong> {{ lang }} </strong> </h5>
        </button>
      </div>
    </div>
  </div>
</nav>

css

来源：https://stackoverflow.com/questions/61516340/ng-bootstrap-drop-down-menu-does-not-seem-to-work-with-ngfor

2条答案

按热度按时间

py49o6xq1#

当需要在循环中创建多个ngbDropdownItem时，您将ngFor应用于ngbDropdownMenu

<div ngbDropdownMenu 
            class="dropdown-menu" 
            aria-labelledby="languageSelect">
        <button ngbDropdownItem 
                *ngFor="let lang of data.languageList;" 
                class="dropdown-item" 
                [ngClass] = "[lang === data.currentLanguage ? 'active' : '']" 
                (click) = "setLanguage(lang)">
             {{ lang }}
        </button>
      </div>

赞(0）回复(0）举报 2023-02-26

lx0bsm1f2#

ul，li方法可用于ngbDropdown

<div ngbDropdown class="dropdown">
<button ngbDropdownToggle  type="button" class="btn btn-secondary dropdown-toggle" 
    id="dropdownMenuButton" aria-expanded="false">
    Project A
</button>
<ul ngbDropdownMenu aria-labelledby="dropdownMenuButton" >
    <li *ngFor = "let lang of data.languageList">
        <a class="ngbDropdownItem" href="#" style="all:unset">{{lang}}</a>
    </li>                                                              
</ul></div>

赞(0）回复(0）举报 2023-02-26

我来回答

css ng-bootstrap下拉菜单似乎不适用于 *ngFor

2条答案

相关问题

热门标签

最新问答