在Angular中如何将对象转换为数组并渲染为列表？

代码修改步骤 #

1. TS层数据处理优化 #

首先给组件变量加类型约束，确保数据接收格式符合预期，如果接口返回的不是直接数组可以在这里做转换：

// 可选操作：声明数据结构接口，方便TS类型校验
interface RepoItem {
  name: string;
  description: string | null;
  language: string;
  html: string;
}

// 组件内声明渲染用的数组变量
reposFiltered: RepoItem[] = [];

// 数据接收方法
selectRepo(data: RepoItem[]){
  // 若你拿到的data不是直接数组，比如是包裹在对象里的结构，可修改为对应取值逻辑，例：this.reposFiltered = data.list
  this.reposFiltered = data;
}

2. HTML层列表渲染修正 #

你原有代码把*ngFor绑定在<ul>标签上，会导致每条数据都生成一个独立的无序列表，应该把循环逻辑绑定到<li>标签上：

<ul>
  <li *ngFor="let filtered of reposFiltered; let idx = index">
    <h4>{{idx+1}}、{{filtered.name}}</h4>
    <p>项目描述：{{filtered.description ?? '暂无描述'}}</p>
    <p>使用语言：{{filtered.language}}</p>
    <p>项目地址：<a href="{{filtered.html}}" target="_blank">{{filtered.html}}</a></p>
  </li>
</ul>

如果数据渲染为空，可先在selectRepo方法里打印data的结构，确认你拿到的数组是不是直接挂载在data下，调整对应取值逻辑即可。

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