Angular中API返回数据无法在表格显示的问题求助

核心原因：字段名大小写不匹配 #

从你提供的Network响应体截图可以看到，后端返回的字段是小写开头的：id、name、urlHandle，但你前端定义的Category接口是大写开头的：Id、Name、UrlHandle。Angular HttpClient默认会严格匹配属性名，导致数据无法正确映射到接口对象中，最终表格无数据渲染。

解决方案 #

方案1：修改前端接口与模板，匹配后端字段（推荐） #

修改model.ts的接口定义，完全对齐后端返回的字段名：

export interface Category{
  id:string;
  name:string;
  urlHandle:string;
}

同时更新HTML模板中的插值表达式：

<tr *ngFor="let category of categories">
  <td>{{ category.id }}</td>
  <td>{{ category.name }}</td>
  <td>{{ category.urlHandle }}</td>
</tr>

方案2：在Service中转换字段映射（不修改接口时使用） #

如果不想改动现有接口和模板，可以在CategoryService中对返回数据做字段转换：

getAllCategories(): Observable<Category[]> {
  return this.http.get<any[]>(`${environment.apiBaseUrl}/api/categories`).pipe(
    map(rawCategories => rawCategories.map(item => ({
      Id: item.id,
      Name: item.name,
      UrlHandle: item.urlHandle
    })))
  );
}

额外检查：组件是否正确初始化Observable #

确保组件类中正确声明并赋值categories$：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Category } from './model';
import { CategoryService } from './service';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.component.html'
})
export class CategoryListComponent implements OnInit {
  categories$: Observable<Category[]>;

  constructor(private categoryService: CategoryService) {}

  ngOnInit(): void {
    this.categories$ = this.categoryService.getAllCategories();
  }
}

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