Bootstrap 4 selectpicker未以角度6显示

Posted 2023-05-08

【中文标题】Bootstrap 4 selectpicker未以角度6显示

【英文标题】：Bootstrap 4 selectpicker not displaying in angular 6

【发布时间】：2021-08-03 16:48:13

【问题描述】：

这个问题已经问过了，但对我不起作用。 我在我的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

【问题讨论】：

我的第一个问题是：它是一个 Angular 项目吗？如果是 Angular，那你为什么要添加这样的脚本和样式表？第二个问题是：您是否在代码中像这样启动了selectPicker？ $('.selectpicker').selectpicker();

@Shuvo：感谢您的回复，是的，它是 Angular 6。我在 stackblitz 中添加了该脚本，但它仍然没有显示 stackblitz.com/edit/…

您好，请查看此链接以在 Angular 项目“talkingdotnet.com/add-bootstrap-4-to-angular-6-application”中设置引导程序

在 Angular 项目中添加 jquery "npm install jquery --save" 并在 angular.json 文件中添加 "scripts" :["./node_modules/jquery/dist/jquery.min.js"]

【参考方案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 inapp.component.html 页面

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

注意：不需要加$('.selectpicker').selectpicker();

【讨论】：

嗨，Ravi Ashara 我正在使用bootstrap 4.0.0，但它仍然没有显示

我添加了你的代码，正如你所说的css文件在里面，js文件在body之后。

@RameshS 欢迎

@RameshS 我显示您的代码，您在app.component.html 中添加了外部库链接，但外部库始终添加到 index.html 文件中

嗨，兄弟，请帮我解决这个问题***.com/questions/67670248/…

【参考方案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

【讨论】：

是的，它现在正在显示。但我期待这样developer.snapappointments.com/bootstrap-select/examples/…

我想用复选框进行多选，实际上在我的代码中 selectpicker css 不能正常工作

我用新的例子更新了答案。你能检查一下吗？它使用@ng-select/ng-select 包。稍后我将尝试使用bootstrap-select 制作一个工作示例。

感谢您的回答，实际上在我的项目中无法通过 npm 安装模块（我没有权限），这就是我使用 Bootstrap 多选的原因。我给你点赞

嗨，兄弟，请帮我解决这个问题***.com/questions/67670248/…