1

我正在使用Angular 6,正在尝试在我的项目中添加Bootstrap Multiselect 。但是这里遇到了一些bootstrap-multiselect.js无法在页面中加载的问题。

所以我想动态添加添加这个bootstrap-multiselect.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 -->
      <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">
      $(document).ready(function() {
            $('#example-getting-started').multiselect({
              includeSelectAllOption: false,
              enableFiltering: true,
              includeFilterClearBtn: false,
              enableCaseInsensitiveFiltering : true,
            });
        });
   </script>
   <!-- Multiselect code -->
</html>

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() { 
     this.loadScript('http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js');
   }

   public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }
}

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>

它仍然显示如下:

在此处输入图像描述

请帮助解决这个问题angular 6。这个问题可能已经问过了,但这并不能解决我的问题。

提前致谢。

4

1 回答 1

2

我已经像您从该网站一样导入了库,但只更改了 jquery。

  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-example.min.css"
    type="text/css">
  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/prettify.min.css"
    type="text/css">
  <link rel="stylesheet"
    href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/fontawesome-5.15.1-web/all.css" type="text/css">


  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script type="text/javascript"
    src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script>
  <script type="text/javascript" src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/prettify.min.js">
  </script>

  <link rel="stylesheet" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css">
  <script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

是堆栈闪电战

在 ngb-modal 内部:stackblitz

于 2021-05-24T13:25:17.107 回答