时间戳

首页 > 解决方案 > Bootstrap 手风琴在 Angular 9 中不起作用

javascript - Bootstrap 手风琴在 Angular 9 中不起作用

问题描述

我正在使用 Angular 9 Installed bootstrap 和 jquery 以下是我的 package.json 中的条目， "bootstrap": "^4.4.1", "jquery": "^3.5.0", 在 angular.json 中导入了 css 和 js 文件，如下所示

 "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],
 "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js"
        ]

并在我的 html 正文中添加了以下代码

<body>
  <div class="accordion" id="accordionExample">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
            aria-expanded="false" aria-controls="collapseOne">
            Collapsible Group Item #1
          </button>
        </h2>
      </div>
      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
          Body1
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
          </button>
        </h2>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body">
          Body2
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
            aria-expanded="false" aria-controls="collapseThree">
            Collapsible Group Item #3
          </button>
        </h2>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
          Body 3
        </div>
      </div>
    </div>
  </div>
</body>

但是当我单击 Accordion 时，我在控制台中收到以下错误

Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test (<anonymous>)
at HTMLDivElement.<anonymous> (bootstrap.js:1509)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1503)
at HTMLDivElement.<anonymous> (bootstrap.js:1563)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at HTMLButtonElement.<anonymous> (bootstrap.js:1558)
at HTMLDocument.dispatch (jquery.js:5429)

我无法弄清楚问题是什么请帮忙。

错误屏幕截图

标签： javascriptangularbootstrap-4

解决方案

这是一个问题"jquery": "^3.5.0"

降级以"jquery": "3.4.1"修复它（确保删除 ^）。

如果一定要使用3.5.0，尝试手动修改：

node_modules/bootsrap/dist/js/bootstrap.js line 1509

改变

if (!data && _config.toggle && /show|hide/.test(config))

至

if (!data && _config.toggle && /show|hide/.test(_config))

推荐阅读