Angular视图中*ngFor无法显示[object Object]返回数据

• Angular的*ngFor指令仅支持遍历可迭代对象（标准数组、Set、Map等实现了迭代协议的结构），无法直接遍历普通键值对对象。你接口返回的someData是键为"1"、"2"的普通Object，不是数组，因此直接遍历无法渲染。
• 代码中存在类型定义错误：接口AnalysisResults里将someData声明为数组类型[]，和实际返回的对象结构不匹配，加上赋值时用as any[]强制类型转换，掩盖了类型不匹配的问题，导致编译阶段没有抛出明确错误。

你可以任选以下一种方式修复：

方案1：前端将对象转为数组后遍历（最常用，无需修改后端） #

1. 先修正TS接口定义，匹配真实返回结构：

// 单条规则数据结构
export interface RuleItem {
  Id: number;
  ruleData: unknown[];
  ruleName: string;
  testDesc: string;
  test: string;
  ruleErrorMessage: string;
}

export interface AnalysisResults {
  score?: number;
  // 修正类型：实际返回的是键为字符串、值为RuleItem的普通对象，不是数组
  someData?: Record<string, RuleItem>;
}

2. 组件中拿到接口数据后，用JS原生方法把对象转成数组再赋值：

getQuality(reqValue: string) {
  this.backend.getQuality(reqValue)
    .subscribe((data: AnalysisResults) => {
      this.analysisResults = {
        score: data.score,
        // 仅取对象的值生成数组，不需要保留原键用这个
        someData: Object.values(data.someData || {})
        // 如果需要保留原对象的键（比如"1""2"这类key），改用下面的写法
        // someData: Object.entries(data.someData || {}).map(([key, value]) => ({key, ...value}))
      }
    }) 
}

改完之后原有模板的*ngFor写法就可以正常渲染，不需要调整模板代码。

方案2：用Angular内置KeyValuePipe直接遍历对象（无需修改TS数据逻辑） #

Angular官方自带的KeyValuePipe支持直接在模板遍历普通对象，不需要提前转数组，只要确保模块已经引入CommonModule，模板改写为：

<h5 *ngFor="let item of analysisResults.someData | keyvalue">
  原对象键名：{{item.key}}
  规则名称：{{item.value.ruleName}}
  错误信息：{{item.value.ruleErrorMessage}}
</h5>

注意：KeyValuePipe默认会按键名的Unicode编码排序，如果需要保留后端返回的原始顺序，可以自定义比较函数传入管道。

方案3：调整后端返回结构（根源解决） #

如果可以修改FastAPI后端逻辑，直接把当前键值对结构的规则数据转为数组返回，前端拿到的就是标准数组结构，不需要做任何额外转换就可以直接用*ngFor遍历。

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