代码之家 › 专栏 › 技术社区 › vigamage

bootstrap select-nativeElement.selectpicker不是函数-Angular 9

bootstrap-selectpicker bootstrap-select angular9 bootstrap-4 angular

0

vigamage · 技术社区 · 4 年前

我试图在我的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包中,我确保引导选择放在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)

我该怎么解决这个问题?

0 回复 | 直到 4 年前

1

0

mr. pc_coder 4 年前

原生元素没有此属性,请使用Jquery。安装并导入库

import * as $ from 'jquery';

然后打电话

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

2

0

vigamage 4 年前

我就是这样解决的。不优雅,但工作。

我从bootstrap中删除了所有的样式、脚本,从angular.json文件中删除了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不是一个函数。

后来我意识到bootstrap-select-js可能已经被它后面的脚本抹去了;我按顺序添加了脚本。

后来发现 this 在github中描述如下。

当你在angular.json文件中添加脚本或样式时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中。