Angular14循环渲染Laravel API返回JSON数组无显示问题

页面空白不渲染的核心原因是变量赋值错误：
你在订阅接口返回值时，把整个接口响应对象直接赋值给了this.contacts，但Laravel返回的结构里，真正的联系人数组是嵌套在响应体的contacts属性下，响应根对象本身是带status、contacts两个字段的普通对象，不是可遍历的数组。*ngFor指令只能遍历数组类可迭代对象，拿到普通对象时不会生成任何DOM节点，自然看不到列表内容。

只需要修改组件内订阅请求的赋值逻辑，取出响应中实际的联系人数组再赋值即可，你写的模板*ngFor循环语法本身没有问题，不需要修改：

this.dataService.geData().subscribe(res=>{
  // 取出响应体里的contacts数组赋值
  this.contacts = res.contacts;
});

如果要做兼容兜底，避免接口返回异常时前端报错，可以加空值保护，默认给空数组：

this.dataService.geData().subscribe(res=>{
  this.contacts = res?.contacts ?? [];
});

检查下你数据服务里的方法名拼写，你调用时写的方法是geData()，如果服务里实际定义的方法名是getData()（漏了字母t），会直接触发脚本报错，请求根本不会发起，也会导致列表空白。

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