我正在尝试在Angular 9项目中使用bootstrap来获得可搜索的选择框。为此，我使用bootstrap选择。
以下是我如何实现它。
在我的模板中：-
<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覆盖。
但是，当我运行程序时，我在视图中看不到我选择的下拉菜单。我在控制台中收到以下错误。
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)
我该怎么解决这个问题？
本机元素没有此属性，请使用Jquery。安装和导入库
import * as $ from 'jquery';
然后呼叫
$('.selectpicker').selectpicker('refresh');
这就是我解决它的方法。不优雅，但工作。
我从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_code在他的回答中所建议的那样，我确实在我的组件中添加了$('.selectpicker').selectpicker();。但它不起作用，我得到错误selectpicker不是一个函数。
后来我意识到bootstrap select js可能已经被后面的脚本删除了；我已按顺序添加了脚本。
后来在github中发现了这一点，描述如下。
当您在angular@6+(或在angular-cli.json中angular@5orEarlier)，预期结果是那些js文件，无论它们是bootstrap.min.css还是jquery.min.js将被处理并组合到新的style.js或scripts.js文件。
根据这一点，有一个js将angular.json文件中的所有脚本文件捆绑在一起。在这种情况下，脚本的顺序可能不是我想要的顺序。
因此，我最终将它们从angular.json文件中删除，并将cdn-url按我希望的顺序放在index.html中。