Angular表格未遍历数据：控制台有数组但HTML无法读取

问题详情 #

HTML代码（表格渲染部分） #

<tr *ngFor="let animal of readAnimal">
  <th scope="row">{{ animal.id }}</th>
  <td>{{ animal.name }}</td>
  <td>{{ animal.description }}</td>
  <td>{{ animal.created_At }}</td>
  <td>{{ animal?.updated_At }}</td>
</tr>

组件核心代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ApiServiceService } from '../api-service.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css'],
})
export class CreateComponent implements OnInit {
  constructor(private api: ApiServiceService, private router: ActivatedRoute) {}

  readAnimal: any;
  errMsg: any;
  successMsg: any;
  getparamid: any;

  getAlldata() {
    console.log('inside getAlldata()');
    this.api
      .getAllAnimals()
      .then((res: any) => {
        console.log('this is res data', res);
        this.readAnimal = res; // Assuming res is an array of animals
        console.log('Data output:', this.readAnimal);
      })
      .catch((error: any) => {
        console.error('Error fetching all animals:', error);
      });
  }
}

控制台输出的API响应结构 #

{
  message: 'All animal data',
  data: Array(11)
  0: {id: 1, name: 'cassius', description: 'good boy', created_At: '2024-06-21T00:21:34.000Z', updated_At: '2024-06-21T02:19:55.000Z'}
  // 剩余10条数据
}

当前控制台能正常输出数据，但HTML模板无法渲染表格，服务端渲染时正常，切换到客户端渲染后出现该问题。

问题核心原因 #

1. 数据赋值错误：API返回的是包含data数组的对象，组件却将整个响应对象赋值给readAnimal，而*ngFor只能遍历数组类型，导致模板无法识别可遍历的数据源。
2. 未触发数据加载：组件的ngOnInit方法未调用getAlldata()，组件初始化时不会主动获取数据。
3. 服务端渲染可能之前对API响应做过结构转换，客户端渲染时未适配实际返回结构。

修复步骤 #

1. 修正数据赋值逻辑 #

在getAlldata的回调中，将响应里的data数组赋值给readAnimal：

this.api.getAllAnimals().then((res: any) => {
  console.log('this is res data', res);
  this.readAnimal = res.data; // 正确取数组部分
  console.log('Data output:', this.readAnimal);
})

2. 初始化时触发数据加载 #

实现ngOnInit方法，确保组件启动时加载数据：

ngOnInit(): void {
  this.getAlldata();
}

3. 可选：添加类型安全与空值保护 #

• 定义动物数据接口避免any类型：

interface Animal {
  id: number;
  name: string;
  description: string;
  created_At: string;
  updated_At: string;
}

// 声明readAnimal类型并初始化空数组
readAnimal: Animal[] = [];

• 模板中使用安全导航操作符防止未加载时报错：

<tr *ngFor="let animal of readAnimal">
  <th scope="row">{{ animal?.id }}</th>
  <td>{{ animal?.name }}</td>
  <td>{{ animal?.description }}</td>
  <td>{{ animal?.created_At }}</td>
  <td>{{ animal?.updated_At }}</td>
</tr>

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