Загрузочные изображения и элементы, которые не отображаются при использовании Angular

#angular #bootstrap-4

Вопрос:

Я использую последнюю версию Bootstrap и Angular и в настоящее время прохожу онлайн-курс по Angular.

Я следую примерам в точности, но есть разница между тем, что отображается в видеороликах инструкторов, и тем, что отображается в моем браузере. Например, с помощью этого кода:

 <ul class="nav nav-pills">
<li [class.active]="viewMode == 'map'"><a (click)="viewMode = 'map'">Map View</a></li>
<li [class.active]="viewMode == 'list'"><a (click)="viewMode = 'list'">List View</a></li>
</ul>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>

Я получаю вывод:

Когда инструктор вводит код, он получает:

Я загрузил неправильный пакет начальной загрузки? Насколько я понимаю, класс «nav nav-таблетки» — это то, что должно отображать его так, как у инструктора.

Вот как выглядит мой HTML-код после добавления схемы начальной загрузки:

1. Убедитесь, что CSS импортирован правильно

2. Я только что проверил свою версию страницы, и там есть Bootstrap CSS. Должно ли быть более одного файла Bootstrap CSS?

3. Нет только одного CSS и одного JS-файла. Файл JS тоже там?

4. Я не вижу Bootstrap.js досье. Как мне это включить?

5. Возможно, вам это не понадобится прямо сейчас, посмотрите на мой ответ. Возможно, вам это понадобится в будущем

Ответ №1:

В вашем примере добавьте эти классы

nav-элемент для li элементов
навигационная ссылка на a теги

Как в этом примере:

 <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Ответ №2:

добавьте схему начальной загрузки Angular в свой проект с помощью этой angular-cli команды:

 ng add @ng-bootstrap/ng-bootstrap