Angular项目无法展示数据库全量数据，请求技术排查协助

我正在开发一个项目，采用Angular作为前端框架、ASP.NET作为后端API、SQL Server作为数据库。目前无法将后端数据库中的全量数据展示到前端页面，仅能看到表格的表头。以下是相关代码，请求协助排查问题：

前端表格代码 #

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Country</th>
            <th>State</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let addr of service.AddressDetailsList">
            <td>{{addr.AddressID}}</td>
            <td>{{addr.Country}}</td>
            <td>{{addr.State}}</td>
            <td>{{addr.City}}</td>
        </tr>
    </tbody>
</table>

Angular组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormDetailsService } from 'src/app/Services/form-details.service';

@Component({
  selector: 'app-home-coming',
  templateUrl: './home-coming.component.html',
  styleUrls: ['./home-coming.component.css']
})
export class HomeComingComponent implements OnInit {

  constructor(public service:FormDetailsService) { }

  ngOnInit(): void {
    this.service.getAddressDetailsnew().subscribe(data=>{
      this.service.AddressDetailsList=data;
    })
    
  }

}

Angular服务代码 #

readonly baseurl="http://localhost:5157/api/RegistrationFormDetails/";
  getAllState():Observable<RegistrationFormDetails[]>{
    return this.http.get<RegistrationFormDetails[]>(this.baseurl);
  }

  AddressDetailsList:AddressDetails[]=[];
 
  getAddressDetailsnew():Observable<AddressDetails[]>{
    return this.http.get<AddressDetails[]>(this.baseurl+"Address")
  }

ASP.NET API接口代码 #

[HttpGet("Address")]
public async Task<ActionResult<IEnumerable<Address>>> GetAddressDetails()
{
    return await _context.Addresses.ToListAsync();
}

排查思路 #

• 验证API接口有效性：直接在浏览器/Postman访问http://localhost:5157/api/RegistrationFormDetails/Address，确认是否返回正确的地址数据。如果无数据：

  • 检查SQL Server的Addresses表是否有记录
  • 确认ASP.NET的DbContext配置正确，能正常连接数据库
  • 查看后端日志，排查接口是否有未捕获的异常

• 检查Angular请求状态：打开浏览器开发者工具的Network面板，查看Address接口请求：

  • 确认请求状态码为200
  • 核对Response返回的数据字段是否与前端AddressDetails类的属性名完全匹配（大小写敏感）
  • 若请求失败，检查是否存在CORS跨域问题（需在ASP.NET后端配置允许前端域名访问）

• 确认数据绑定逻辑：

  • 在Angular组件的subscribe回调中添加console.log(data)，查看是否成功获取到数据
  • 确认服务中的AddressDetailsList是公共可访问的（当前代码已满足）

• 排查模板渲染问题：

  • 可以在模板中添加空状态提示：<tr *ngIf="service.AddressDetailsList.length === 0"><td colspan="4">暂无数据</td></tr>，判断是否是数据为空导致不渲染
  • 核对*ngFor语法是否正确（当前代码无语法错误）

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