为什么我的 bootstrap 5 弹出框返回 Uncaught TypeError？答案

【问题标题】：why my popovers from bootstrap 5 return a Uncaught TypeError?为什么我的 bootstrap 5 弹出框返回 Uncaught TypeError？
【发布时间】：2021-05-02 05:36:40
【问题描述】：

我想在我的 Angular 应用中使用 Bootstrap 5 弹出框。

这是我的工作：

我的 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>my website</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  <script>
    var popover = new bootstrap.Popover(document.querySelector('.popoverable'), {
      container: 'body'
    })
  </script>
</body>
</html>

app.component.html

<button type="button" class="btn btn-secondary popoverable" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>

然后在我的页面上，我看到了我的样式按钮，但弹出框没有出现，并且在控制台中我得到一个 Uncaught TypeError: this._element is undefined。

有人能解决我的问题吗？

【问题讨论】：

我认为您的 javascript 正在尝试在页面完全呈现之前运行，请将您的 popover javascript 放入文档加载中，然后再试一次
什么意思，我应该把它放在哪里？在我的“app.component.ts”中？ @Tch

标签： javascript twitter-bootstrap angular-cli bootstrap-5

【解决方案1】：

您使用的是 bootstrap 5 的测试版，它不需要 jQuery 并使用自己的 javascript 文件。

要初始化 bootstrap 的 js，你必须使用bs。

替换：

data-toggle 到 data-bs-toggle
data-placement 到 data-bs-placement
data-content 到 data-bs-content

您的代码：

<button type="button" class="btn btn-secondary popoverable" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>

更新代码：

<button type="button" class="my-5 d-block btn btn-secondary popoverable" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>

【讨论】：

它没有解决问题，但感谢您指出该问题
这是我现在可以在您的代码中看到的唯一问题。检查一次 javascript 是否正在加载。