如何在Angular HTML中通过循环渲染嵌套数组生成重复UI？

你的代码结构属于Angular组件，直接利用Angular的*ngFor指令就能批量生成目标UI，无需重复编写HTML代码，具体实现如下：

完整渲染代码 #

把这段代码替换你原来的重复HTML结构即可：

<div class="col-md-2" *ngFor="let group of industries">
  <div class="nav-item dropdown">
    <a href="#" data-toggle="dropdown">{{ group.alphaIndex }}
      <i class="bi bi-chevron-right"></i>
    </a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item" *ngFor="let industry of group.industries">
        {{ industry }}
      </a>
    </div>
  </div>
</div>

代码说明 #

1. 外层*ngFor：遍历组件类中的industries数组，每个循环项对应一个Industries实例，用group作为别名。
2. 渲染分组标题：通过{{ group.alphaIndex }}绑定每个分组的字母索引（比如A-E、FO）。
3. 内层*ngFor：在下拉菜单容器内，遍历当前分组的industries字符串数组，生成每个行业选项。

额外优化建议 #

如果后续getIndustryData改为异步获取数据（比如从API拉取），建议给外层容器加上*ngIf避免空值渲染：

<div *ngIf="industries.length" class="row">
  <!-- 上面的循环代码放在这里 -->
</div>

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