引导选择 - nativeElement.selectpicker 不是函数 - Angular 9答案

【问题标题】：bootstrap select - nativeElement.selectpicker is not a function - Angular 9引导选择 - nativeElement.selectpicker 不是函数 - Angular 9
【发布时间】：2020-11-05 16:48:38
【问题描述】：

我正在尝试在我的 Angular 9 项目中让可搜索的选择框与引导程序一起使用。为此我使用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 覆盖。

但是，当我运行程序时，我在视图中看不到我的选择下拉菜单。我在控制台中收到以下错误。

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)

我该如何解决这个问题？

【问题讨论】：

参考这个github.com/snapappointments/bootstrap-select/issues/2040
@NitinLawande 我也检查过。还是同样的问题。

标签： angular bootstrap-4 angular9 bootstrap-select bootstrap-selectpicker

【解决方案1】：

本机元素没有此属性，请使用 Jquery。安装和导入库

import * as $ from 'jquery';

然后调用

 $('.selectpicker').selectpicker('refresh');

【讨论】：

当我这样做时，我得到 selectpicker is not a function 错误

【解决方案2】：

这就是我解决问题的方法。不优雅，但工作。

我从 angular.json 文件中删除了所有样式、bootstrap 脚本、bootstrap select 和 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 is not a function。

后来我意识到 bootstrap select js 可能已经被后面的脚本清除了。但是如何；我已经按顺序添加了脚本。

后来在github找到this，描述如下。

当你将脚本或样式添加到 angular@6+ 中的 angular.json 文件时（或在 angular@5orEarlier 的 angular-cli.json 中），预期结果是那些 js 文件，无论它们是 bootstrap.min.css 还是 jquery.min.js 将被处理并合并到新的 style.js 或 scripts.js 文件。

据此，有一个js捆绑了angular.json文件中的所有脚本文件。那样的话，脚本的顺序可能不会按照我想要的顺序。

所以我最终将它们从 angular.json 文件中删除，并按照我希望它们的顺序将 cdn url 放置在 index.html 中。

【讨论】：