这是引导导航栏
我只是将相同的代码复制并粘贴到我的角度项目中。但是，下拉列表显示不正确。
我想要两件事来寻求帮助。
显示下拉菜单。
原始代码用于对下拉菜单项进行硬编码。
<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：-您必须实现逻辑，该逻辑将在单击切换后负责操作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句