html - Bootstrap 4 selectpicker未以角度6显示

Question

这个问题已经问过了，但它对我不起作用。我Bootstrap 4 selectpicker在我的中使用angular 6，但它没有显示。其中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

标签： htmlangularselectbootstrap-4bootstrap-selectpicker

Answer 1

您可以将其添加到您的 css 中：

.selectpicker {
  display: block !important;
}

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

由于您正在使用 Angular 进行开发，因此我建议您检查@ng-select/ng-selectpackage.json 。它有很多有用的功能，你可以安装一个包并使用它。

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

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