Dropdown Bootstrap 4 在 Angular 应用程序的生产中不起作用

2024-02-16

我在我的角度应用程序中使用 bootstrap 4,下拉功能在开发人员模式下完美运行,但在生产模式下,我收到此错误:

未捕获的错误:DROPDOWN:选项“popperConfig”提供类型“window” 但预期类型为“(null|object)”。
在 Object.typeCheckConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 e.t._getConfig (vendors.e5434761d9d5f5d91054.bundle.js:1)
在新的 e (vendors.e5434761d9d5f5d91054.bundle.js:1)
在 HTMLButtonElement 处。 (供应商.e5434761d9d5f5d91054.bundle.js:1)

这是我在应用程序中使用的代码

<div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" 
    id="dropdown-search" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">

    Fiches consultées
  </button>

  <div class="dropdown-menu dropdown-filter filter-menu" 
    aria-labelledby="dropdown-search">

    <div *ngFor="let h of historiques" class="form-check">

      <input class="form-check-input" id="{{h.name}}" type="checkbox"
        value="{{h.name}}" [(ngModel)]="h.selected" 
        (change)="getSelected()">

      <label class="form-check-label" for="{{h.name}}">
        {{h.code}}
      </label>
    </div>
  </div>
</div> 

问题出在 bootstrap 4.4+ 版本上,更改为 bootstrap 4.3.1 并且可以正常工作。

您可以从 npm 安装它,然后将路径添加到 angular.json 文件(样式和脚本配置)中:

npm install [email protected] /cdn-cgi/l/email-protection

或者在你的index.html中使用url

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Dropdown Bootstrap 4 在 Angular 应用程序的生产中不起作用 的相关文章