为什么我的引导下拉元素渲染不好？答案

【问题标题】：Why do my bootstrap dropdown elems render badly?为什么我的引导下拉元素渲染不好？
【发布时间】：2019-06-29 12:27:27
【问题描述】：

我想用 ng-bootstrap 美化我的前端（通过 npm install --save ng-bootstrap 安装）

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  ...
  imports: [NgbModule.forRoot(), ...],
  ...
})
export class YourAppModule {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
        Choose your playlist
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button
            class="dropdown-item" 
            *ngFor="let playlist of playlists"
            [class.selected]="playlist === selectedPlaylist"
            (click)="onSelect(playlist)">{{playlist.name}}</button>
    </div>
</div>

但它的渲染是这样的：

关于如何解决*插入许多令人讨厌的同义词*结果的任何想法？ :D

【问题讨论】：

您似乎同时使用 AngularJS 和 Angular。
仅供参考，使用这种语言会触发各种警报，从而使您受到很多负面关注。所以下次保持凉爽

标签： html angular angular7 ng-bootstrap

【解决方案1】：

您好像忘记添加bootstrap.css。

只需在 index.html 中添加指向该链接的链接：

<link 
  rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

此外，您将从该路径导入 NgbModule：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

不不打电话.forRoot就可以了。

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：