如何通过REST API在Angular中将数据库数据填充到下拉列表

数据老陈

2026-8-23

问题：下拉列表无法加载API获取的服务数据

我已经创建了获取所有服务的API，想把服务名称放到下拉列表里，但测试后发现无法正常运行，无法从数据库获取数据！

HTML代码

<div class="col-lg-6">
     <select name="Service" 
      class="form-control">
     <option>-- Select Services --</option>
     <option [value]="serv.service_name" *ngFor="let serv of ServiceList">
       {{ serv.service_name}}
     </option>
   </select>
</div>

TS代码

ServiceList: any;
ngOnInit(): void {
this.serviceService.getAllServices().subscribe((data: any)=>{
  this.ServiceList = data;
  //console.log(this.services);
})  
}

请求错误截图：

排查解决步骤

检查接口请求状态：打开浏览器F12的Network面板，查看getAllServices接口的请求状态码。如果是4xx/5xx，说明后端接口存在问题（比如路由错误、权限不足、数据库查询失败）；如果是200，查看返回数据的结构是否为数组，且每个对象包含service_name字段。
初始化数组变量：将ServiceList: any;改为ServiceList: any[] = [];，避免Angular渲染时因初始值为undefined导致的遍历报错。
验证数据是否获取：取消注释并修正控制台打印代码为console.log(this.ServiceList);，查看浏览器Console面板是否输出了正确的数据。
确认服务注入：确保组件的构造函数中已正确注入serviceService，例如：
```
constructor(private serviceService: ServiceService) {}
```
查看控制台错误信息：检查Console面板是否有Angular相关报错（如服务未找到、数据结构不匹配等），根据报错信息定位问题。