Angular中如何在HTML组件中展示枚举数组？

先修正模板拼写错误 #

你提到用*ngIf="object"包裹时误写为tempObject，这会导致*ngFor所在区块根本不会渲染，首先要修正这个拼写：

<ul *ngIf="object" class="list-group list-group-flush">
  <li *ngFor="let prop of object.characteristics" class="list-group-item">
    {{ prop }}
  </li>
</ul>

排查数组的真实性 #

虽然直接插值{{object.characteristics}}能显示内容，但要确认它是真正的数组类型，而非字符串形式的数组。在组件类中添加调试代码：

ngOnInit() {
  // 假设object在此处赋值
  console.log(this.object.characteristics);
  console.log('是否为数组：', Array.isArray(this.object.characteristics));
}

如果打印结果显示是字符串（比如"[Calm,Sozial,Fearful,Protective,Friendly]"），需要先将其解析为数组：

this.object.characteristics = JSON.parse(this.object.characteristics);

枚举类型的适配处理 #

如果characteristics是枚举成员组成的数组，确保组件类将枚举暴露给模板（Angular模板无法直接访问未导出的枚举）：

// 假设你的枚举定义
enum Trait {
  Calm = 'Calm',
  Sozial = 'Sozial',
  Fearful = 'Fearful',
  Protective = 'Protective',
  Friendly = 'Friendly'
}

export class DetailComponent {
  // 将枚举暴露给模板
  Trait = Trait;
  object: { characteristics: Trait[] };
  // ...其他逻辑
}

如果数组存储的是枚举的数字值，模板中需要映射为对应的名称：

<li *ngFor="let prop of object.characteristics" class="list-group-item">
  {{ Trait[prop] }}
</li>

检查控制台错误 #

打开浏览器开发者工具的控制台，查看是否有Angular抛出的错误（比如NgFor only supports binding to Iterables such as Arrays），这类提示会直接指向问题根源。

排除路由影响 #

你的路由配置没有明显问题，且组件能正常获取并显示对象的其他属性，因此路由不是导致*ngFor失效的原因，无需在此处调整。

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