尽管支持跨原点(Angular+Spring)，但数据未显示在Angular中

Question

我正在尝试使用Spring和Angular构建一个全栈应用程序。

我已经成功地配置了RESTAPI，它们在8080端口上运行良好。然而，当我尝试通过前端(Angular服务(访问它们时，页面加载得很好，但没有显示任何数据。我在Spring中为接口添加了跨原点支持，因此控制台窗口中也不会显示任何错误。

但是，它显示检索到的数据是未定义的。(附图片(

客户列表组件(typescript(

import { Component, OnInit } from '@angular/core';
import { Customer } from 'src/app/common/customer';
import { CustomerService } from 'src/app/services/customer.service';
@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
customers: Customer[];
constructor(private customerService: CustomerService) { }
ngOnInit() {
this.listCustomers();
}
listCustomers() {
this.customerService.getCustomerList().subscribe(
data => {
this.customers = data;
console.log(`Data retrieved: ${this.customers}`);
}
);
}
}

客户组件(html(

<p>
this works!
</p>
<p *ngFor = "let tempCust of customers">
hello
{{ tempCust.name }}
</p>

客户服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Customer } from '../common/customer';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class CustomerService {
private baseUrl = 'http://localhost:8080/api/customerDetails';
constructor(private httpClient: HttpClient) { }
getCustomerList(): Observable<Customer[]> {
return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
map(response => response._embedded.customers)
)
}
}
interface GetResponse{
_embedded : {
customers: Customer[];
}
}

端口4200端口4200上显示的页面图像

8080端口端口8080 上显示的页面图像

我哪里可能出错了？

提前感谢！

Answer 1

看起来API将数据放入response._embedded.customerDetails，而不是response._embedded.customers

Answer 2

在浏览器开发工具中检查api的get和post请求，并确保angular获得响应。如果从api得到任何成功的响应，那么问题可能是对象映射问题，比如文件名。