导航栏下拉菜单未以角度显示答案

【问题标题】：Navbar dropdown is not showing in angular导航栏下拉菜单未以角度显示
【发布时间】：2021-05-09 02:34:55
【问题描述】：

我刚刚将相同的代码复制并粘贴到我的 Angular 项目中。但是下拉菜单显示不正确。

我想要两件事来获得帮助。

显示下拉菜单。

原始代码使用硬编码下拉项。

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

现在我在组件 ts 文件中创建了一个数组。

    this.items = [
      {name: 'Action', url: 'app/aaa'},
      {name: 'Another Action', url: 'app/bbb'},
      {name: 'Something else here', url: 'app/ccc'}
    ];

我想使用*NgFor 来迭代数组而不是硬代码。怎么改html？

【问题讨论】：

你可能必须确保你已经让 jQuery 可以被 Angular 应用程序访问。
但我不想使用 jquery，因为它是一个角度应用程序。我想要所有的角手柄。这可能吗？
ng-bootstrap.github.io/#/components/dropdown/examples - 所有组件均使用角度方法编写
同意@Chris - 使用 ng-bootstrap 库。 10/10 推荐
好吧，如果有适合我情况的答案，那就太好了。而且 ng-bootstrap 有点老了。

标签： html css angular twitter-bootstrap navbar

【解决方案1】：

正如documentation 中提到的，您必须包含一些依赖项才能使 Bootstrap 完全正常工作。要包含 Bootstrap 所需的库 - 您可以将 script tags 添加到您的 index.html 文件中。 At the end of body.

<my-app>loading</my-app>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

然后，要遍历组件中声明的items，您可以use *ngFor like below：

<a class="dropdown-item" *ngFor="let item of items; let i = index" [href]="item.url">{{item.name}}</a>

Demo

如果您不想使用 jQuery： - 您必须实现在单击切换后负责操作的逻辑。

在这里您可以看到example 正在实现切换下拉菜单的逻辑。

【讨论】：

这不是答案。如果您认为 jQuery 是必需的，您能否在演示中展示如何添加它？我还有两个问题。第二个还没有回答。
虽然可行，但如果有办法使用纯 css 那就太好了。