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