引导选择- nativeElement.selectpicker不是函数- Angular 9
我正在尝试让可搜索的选择框在我的Angular 9项目中与bootstrap一起工作。为此，我使用bootstrap select.
下面是我是如何实现它的。
在我的模板中：
<div class="form-group row">
<label for="txnSubCategory" class="col-sm-6 col-md-4 col-form-label">Transaction Sub Category</label>
<div class="col-sm-6 col-md-8">
<select #selectTxnSubCategory class="form-control selectpicker" data-live-search="true" id="txnSubCategory" data-width="100%"
formControlName="txnSubCategory">
<option data-tokens="ABCD" value="Yes" selected>ABCD</option>
<option data-tokens="PQRS" value="No">PQRS</option>
<option data-tokens="LMNO" value="No">LMNO</option>
</select>
</div>
</div>在组件中:-
@ViewChild('selectTxnSubCategory') selectTxnSubCategory: ElementRef;
ngAfterViewInit() {
this.selectTxnSubCategory.nativeElement.selectpicker('refresh');
}在我的包json中，我已经确保将bootstrap-select放在jquery之后。与angular.json文件相同。这样引导选择就不会被jquery覆盖。
但是，当我运行程序时，我在视图中看不到我的select下拉列表。我在控制台中看到以下错误。
core.js:6241 ERROR TypeError: this.selectTxnSubCategory.nativeElement.selectpicker is not a function
at BasicInfoComponent.ngAfterViewInit (basic-info.component.ts:33)
at callHook (core.js:4726)
at callHooks (core.js:4690)
at executeInitAndCheckHooks (core.js:4630)
at refreshView (core.js:12088)
at refreshEmbeddedViews (core.js:13404)
at refreshView (core.js:12035)
at refreshComponent (core.js:13458)
at refreshChildComponents (core.js:11729)
at refreshView (core.js:12064)我该如何解决这个问题呢？
回答 2
Stack Overflow用户
发布于 2020-07-16 14:31:31
原生元素没有这个属性，为此使用Jquery。安装和导入库
import * as $ from 'jquery';然后调用
$('.selectpicker').selectpicker('refresh');Stack Overflow用户
发布于 2020-07-16 18:21:03
这就是我解决问题的方法。不是很优雅，但很好用。
我删除了所有的样式，脚本从引导，引导选择和angular.json文件中的jquery，并添加到index.html中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>在我的组件中，
import * as $ from 'jquery';
ngAfterViewInit() {
$('.selectpicker').selectpicker();
}事情就是这样发展的。:)
备注：
正如@pc_coder所建议的in his answer，我确实在组件中添加了$('.selectpicker').selectpicker();。但是它不起作用，我得到的错误是selectpicker不是一个函数。
后来我意识到bootstrap select js可能已经被后面的脚本清除了。我已经按顺序添加了脚本。
后来在github中找到了this，如下所述。
当您在angular@6+ (或angular@5orElier中的angular-cli.json中)的angular.json文件中添加脚本或样式时，预期的结果是这些js文件将被处理并组合到新的style.js或scripts.js文件中，无论它们是bootstrap.min.css还是jquery.min.js。
根据这一点，有一个js捆绑了angular.json文件中的所有脚本文件。在这种情况下，脚本的顺序可能不是我想要的顺序。
因此，我最终将它们从angular.json文件中删除，并按我想要的顺序将cdn放入index.html中。
https://stackoverflow.com/questions/62927551
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号