Angular将API返回JSON内linkedRights数组渲染表格解决NgFor报错问题

错误原因 #

1. 你在onModelLoadedAsync函数内部声明的const data是局部变量，组件模板无法访问，模板读取到的data实际是未定义的对象类型，因此触发NgFor仅支持迭代数组类对象的报错。
2. API返回的linkedRights本身就是标准数组，不需要使用Object.entries做转换，转换后得到的是[索引, 数据对象]格式的二维数组，也不符合你渲染取值的逻辑。
3. 额外的字段拼写错误：API返回的禁用状态字段是disable，你模板里写的item.disabled无法正确读取值。

修改方案 #

1. 修改component.ts代码

首先在组件类内部声明公共变量，供模板访问：

// 写在组件类的属性声明区域，不要写在函数内部
public linkedRightsList: any[] = [];
// 建议把any替换为你项目里linkedRights对应项的类型定义，更符合TS规范

然后修改onModelLoadedAsync里的edit分支逻辑：

if(this.mode == 'edit'){
  // 直接赋值原有数组即可，加空值兼容避免报错
  this.linkedRightsList = this.model.linkedRights ?? [];
  console.log(this.linkedRightsList);
}

2. 修改模板代码

调整遍历对象，修正字段拼写，数组类型字段可转成字符串显示：

<tbody>
  <tr *ngFor="let item of linkedRightsList">
    <td>{{item.title}}</td>
    <td>{{item.sections?.join('、')}}</td>
    <td>{{item.statesApplied?.join('、')}}</td>
    <td>{{!item.disable}}</td>
    <td>{{item.creationDate}}</td>
  </tr>
</tbody>

如果需要兼容空数据场景，可以给表格加一层判断：

<div *ngIf="linkedRightsList.length > 0; else emptyTips">
  <!-- 原有表格代码 -->
</div>
<ng-template #emptyTips>
  <p>暂无关联权限数据</p>
</ng-template>

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