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

Question

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

Answer 1

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

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