Почему мои элементы начальной загрузки плохо отображаются? - PullRequest
Новая
       24

Почему мои элементы начальной загрузки плохо отображаются?

0 голосов
/ 05 февраля 2019

Я хотел украсить свой интерфейс с помощью 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>

но это выглядит так:

render-failed

Любые идеи о том, как это исправить, * вставить много перевариваниясинонимы * результат?: D

1 Ответ

0 голосов
/ 05 февраля 2019

Похоже, вы забыли добавить 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 на нем.

Вот РабочаяОбразец StackBlitz для вашей ссылки.

...