错误 NullInjectorError：R3InjectorError（AppModule）[NgbDropdown -> NgbDropdown -> NgbDropdown]：NullInjectorError：NgbDropdown 没有提供者

Question

我对 angular 很陌生，因为我现在正在实习。 但是，我想了解如何在 ngBootstap 中正确设置动态下拉列表，因为我收到以下错误：错误

这是我的 HTML：

父母：

<div class="container" id="container">
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
      Dropdown button
    </button>
    <div app-city-details-component *ngFor="let city of cityArray" [city]="city" ngbDropdownMenu>
    </div>
  </div>

孩子：

<div class="container" id="container" ngbDropdownItem>
<button class="button" type="button" (click)="handleClick()">
    <p>{{city.name}}</p>
    <p>Latitudine: {{latitudine}}</p>
    <p>Longitudine: {{longitudine}}</p>
    <p>Timezone: {{timezone}}</p>
    <div app-show-weather-conditions [weather]="currentRealWeather"></div>
</button>

我的 app.module.ts：

应用程序模块.ts

我在做什么 wrog？

Answer 1

尝试使用 ngbDropdown 在一个 div 中关闭您的代码，并使用 ngbDropdownMenu 将子项包装在另一个 div 中。

<div class="container" id="container">

<!-- Add this -->
<div ngbDropdown> 

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>
      Dropdown button
    </button>
    <!-- Change this -->
    <div ngbDropdownMenu>
   <app-city-details-component 
   *ngFor="let city of cityArray"    [city]="city"> 
    </app-city-details-component>
    </div>

 </div>

</div>