Bootstrap 4 选择器未显示在 angular 6

Question

这个问题已经问过了，但它对我不起作用。在我的 angular 6 中使用 Bootstrap 4 selectpicker，但它没有显示。在 css 中显示 display: none !important;

我的示例代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

演示 https://stackblitz.com/edit/angular-ivy-pmyy6e?file=src%2Fapp%2Fapp.component.html

Answer 1

Add these links in head part 在 index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

Add these links in after body part completed 在 index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Add below content in app.component.html 页

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

注：不用加$('.selectpicker').selectpicker();

Answer 2

您可以将此添加到您的 css:

.selectpicker {
  display: block !important;
}

这是更新后的示例：https://stackblitz.com/edit/angular-ivy-i2ozz2?file=src/app/app.component.css

由于您是在 Angular 中开发的，我建议您检查 @ng-select/ng-select 包。它有这么多有用的功能，你只需安装一个包就可以使用它。

包裹：https://www.npmjs.com/package/@ng-select/ng-select

这是工作示例：https://stackblitz.com/edit/angular-fauxb2?file=src/multi-select-hidden-example.component.html

Bootstrap 4 选择器未显示在 angular 6

Bootstrap 4 selectpicker not displaying in angular 6

html

angular

select

bootstrap-4

bootstrap-selectpicker