html - 导航栏下拉菜单未以角度显示
问题描述
这是引导导航栏
我只是将相同的代码复制并粘贴到我的 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?
解决方案
正如文档中提到的,您必须包含一些依赖项才能使 Bootstrap 完全工作。要包含 Bootstrap 所需的库 - 您可以将脚本标签添加到index.html
文件中。在结束时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
组件中声明的内容,您可以使用*ngFor
如下所示:
<a class="dropdown-item" *ngFor="let item of items; let i = index" [href]="item.url">{{item.name}}</a>
如果您不想使用 jQuery : - 您必须实现在单击切换后负责操作的逻辑。
在这里,您可以看到实现逻辑以切换下拉菜单的示例。
推荐阅读
- sql-server - 获取 SQL Server 图形数据库中的所有好友
- python - 通过唯一的交替颜色对列进行分组,并使用 XlsxWriter 根据 ID 交替这些颜色
- javascript - nodejs fs 路径和 readdirSync
- reactjs - 将 webpack react bundle 动态注入到正在运行的页面中
- python - 如何在 python 中检查连续整数作为字符串?
- amazon-s3 - Quarkus RESTEasy 默认依赖,无需自定义 html 解析即可获取上传文件名的解决方法
- javascript - 试图在烧瓶应用程序中提供安全脚本
- symfony - 如何在 Symfony4 中返回选民的额外信息?
- python - 具有多个标签的 sklearn 确定性回归
- php - PHP:使用 DomXPath 添加/编辑输出标签