Angular使用ngFor填充下拉菜单仅显示第一条数据问题求助

问题根因 #

你错误地将*ngFor指令绑定在了<ul>标签上，这会导致每遍历数组中的一个元素，就生成一个完整的下拉菜单容器。而Bootstrap下拉组件的逻辑是仅展示第一个匹配.dropdown-menu的元素，所以你只能看到第一条数据，其余生成的<ul>会被默认隐藏不展示。如果把*ngFor绑定到更外层的标签上，自然会循环复制整个下拉组件结构。

解决方案 #

将*ngFor指令移动到需要循环生成的菜单项<li>标签上即可，修正后的模板代码如下：

<div class="dropdown">
  <button (click) = "dd()" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Select Doctor
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li *ngFor="let d of doctor"><a class="dropdown-item" href="#">{{d.name}}</a></li>
  </ul>
</div>

*ngFor指令的作用是循环生成绑定该指令的元素，你只需要循环生成下拉菜单项，不需要循环生成整个下拉菜单容器，调整后即可正常展示所有返回的医生数据。

内容的提问来源于stack exchange，提问作者Subhajit