在Angular中如何将API返回的work_description数组渲染为无序列表

你目前是直接将整个work_description数组输出到单个列表项中，Angular在渲染数组时会默认转为逗号拼接的字符串，因此所有内容都挤在同一条列表项里。

常规写法（兼容所有Angular版本） #

在组件模板中使用*ngFor指令遍历work_description数组，为每个数组项单独生成列表项即可：

<!-- 假设你组件中存储该条数据的变量名为 workExperience -->
<ul>
  <li *ngFor="let descItem of workExperience.work_description">
    {{ descItem }}
  </li>
</ul>

Angular 17+ 可选写法（内置控制流） #

如果你使用的是Angular 17及以上版本，也可以用内置@for语法实现同样效果：

<ul>
  @for (descItem of workExperience.work_description; track descItem) {
    <li>{{ descItem }}</li>
  }
</ul>

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