ng- bootstrap выпадающее меню не работает с * ngFor - PullRequest
Новая
       36

ng- bootstrap выпадающее меню не работает с * ngFor

0 голосов
/ 30 апреля 2020

Раскрывающееся меню должно динамически заполнять список языков. Я попытался с помощью 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 голосов
/ 30 апреля 2020

Вы применили ngFor к ngbDropdownMenu, пока необходимо создать в цикле несколько ngbDropdownItem с 

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