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

时间:2020-04-30 05:13:38

标签: html css angular bootstrap-4 ng-bootstrap

应该使用“下拉菜单”来动态填充语言列表。我尝试使用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>

1 个答案:

答案 0 :(得分:0)

您将Mac OS 10.15.4应用于ngFor时需要一个周期创建几个ngbDropdownMenu s

ngbDropdownItem