在Angular项目中如何读取并展示API返回的ArrayObject数组数据

正确实现方式 #

你原来的模板遍历逻辑本身是成立的，出现问题大概率是API返回数据没有正确处理，或者变量初始值设置不对，按以下步骤调整即可：

1. 组件层数据处理

首先确认接口返回数据已经转成可遍历的数组，同时可根据需求选择是否将二维数组转成可读性更高的对象数组：

// 可选：定义数据类型方便后续维护
interface User {
  id: number;
  name: string;
  status: number;
}

export class YourComponent {
  // 初始值必须设为空数组，避免遍历undefined报错
  report: User[] = [];

  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('你的API接口地址').subscribe(res => {
      // 如果接口返回的是JSON字符串，先做解析
      const rawData = typeof res === 'string' ? JSON.parse(res) : res;
      // 可选：将二维数组转成对象数组，后续模板写起来更清晰
      this.report = rawData.map((item: any[]) => ({
        id: item[0],
        name: item[1],
        status: item[2]
      }));
    })
  }
}

2. 模板层代码

如果用了上面的对象数组转换，模板直接访问属性即可，可读性和可维护性更高：

<table>
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody *ngIf="report.length">
    <tr *ngFor="let user of report; trackBy: trackById">
      <td>{{user.id}}</td>
      <td>{{user.name}}</td>
      <td>{{user.status}}</td>
    </tr>
  </tbody>
  <!-- 数据为空时的提示 -->
  <tbody *ngIf="!report.length">
    <tr>
      <td colspan="3">暂无数据</td>
    </tr>
  </tbody>
</table>

组件中补充trackBy方法优化渲染性能：

trackById(index: number, item: User): number {
  return item.id;
}

如果不想做二维数组转对象的操作，保持原来的索引访问写法也可以，只需要保证report是正确的二维数组即可：

<tbody *ngIf="report.length">
  <tr *ngFor="let user of report; trackBy: trackByIndex">
    <td>{{user[0]}}</td>
    <td>{{user[1]}}</td>
    <td>{{user[2]}}</td>
  </tr>
</tbody>

对应的trackBy方法：

trackByIndex(index: number): number {
  return index;
}

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