angular - Bootstrap Multiselect在Angular 6中不起作用
问题描述
我正在尝试在我的项目中实现Bootstrap Multiselect Reference 。Angular 6
但它不工作https://stackblitz.com/edit/angular-ivy-g1nnof?file=src%2Findex.html
我的代码如下:
角.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/sg-bootstrap/themes/standard/css/sg-bootstrap-standard.min.css",
"node_modules/ag-grid-community/dist/styles/ag-grid.css",
"node_modules/ag-grid-community/dist/styles/ag-theme-fresh.css",
"node_modules/ezweb-customization/min/agGrid-standard.min.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles/fontawesome/css/fontawesome-all.css",
"src/styles/styles.scss",
"src/styles/menu.css",
"src/styles/general.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
索引.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<my-app>loading</my-app>
<!-- Inclusion of sgwt widgets -->
<script src="https://shared.sgmarkets.com/widgets/sgwt-widget-polyfills/sgwt-widget-polyfill-webcomponent.js"></script>
<script defer src="https://shared.sgmarkets.com/widgets/sgwt-super-header/v2/sgwt-super-header.js"></script>
<script defer src="https://shared.sgmarkets.com/widgets/sgwt-mini-footer/v2/sgwt-mini-footer.js"></script>
<script defer src="https://shared.sgmarkets.com/widgets/sgwt-help-center/v2/sgwt-help-center.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script>
if ('serviceWorker' in navigator && location.hostname !== 'localhost') {
navigator.serviceWorker.register('ngsw-worker.js').then(function() {
console.log('Service Worker registered');
}).catch(function(err) {
console.log('Service Worker registration failed: ', err);
});
}
</script>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
<!-- Multiselect code -->
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css"
type="text/css" />
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript"
src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example-getting-started').multiselect({
includeSelectAllOption: false,
enableFiltering: true,
includeFilterClearBtn: false,
enableCaseInsensitiveFiltering : true,
});
});
</script>
<!-- Multiselect code -->
</html>
app.component.html
<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
它没有给出预期的设计。请帮我解决这个问题。可能这个问题已经问过了,但这并不能解决我的问题。
注意:我无权安装节点模块
npm
,这就是我使用的原因jQuery plugin
提前谢谢!
解决方案
推荐阅读
- r - Count and show unique values in a column given another column in R
- javascript - Sorting API list using filter
- amazon-web-services - AWS AppConfig and Parameter Store
- android - How to change TextInputLayout or AutoCompleteTextView's ripple color in Java?
- python - Match consecutive vowels
- javascript - Timer interval increases as I activate extra timers
- haskell - Actual type is `Maybe (Maybe [(Nucleotide, Int)])` when I expect it to be `[(Nucleotide, Int)]`
- python - Tensorflow Dataset - dataset.repeat()
- reactjs - Array Passed in Props Showing Up as Empty
- javascript - Is there any way to prohibit the screen from scrolling when moving input type=range?