Angular Services：Promise 返回奇怪的结果

Question

我正在努力正确设计 Angular 服务。用例：

在 Angular 组件中，我将调用一个服务，该服务应该返回我想要转换的数据，如下所示：

  private async getEntities() {
    
    let req = { condition1: this.condition1, condtion2: this.condition2 }
    let result = await this.EntityService.findByConditions(req);

  }

对应的服务调用如下：

public findByConditions(requestBody) {
    return this.http.post<any>(API_URL + "/fancyEndpoint", requestBody).toPromise().then(response => 
                {console.log(response) }).catch(error => console.log(error));
 }

My Backend 以正确的方式返回了这些对象的 List，但是 Frontend 日志中的结果如下：

因此，由于我对 Angular 和前端开发还很陌生，所以我遇到了以下问题：

1. 怎么可能只返回一个元素作为实际对象，而所有其他元素都由数据库 ID 表示？
2. 在渲染之前获取需要转换的数据的最佳实践是什么（例如：从端点调用数据，从中构建一个 ChartJs 图表（我们必须等待 Observable/Promise 完成），然后渲染它到 HTML）？

抱歉，这个问题太长了，我是前端开发的新手，正在寻找最佳实践解决方案。

提前致谢！

Answer 1

这里有两个选项，一个是根据您在请求正文中发送的参数过滤后端的数据，第二个选项是您获取所有数据，然后使用管道过滤数据和在 UI 中返回你需要的数据，你也可以让这个管道接收参数并更通用。

这是一个关于如何在 Angular 中使用管道的链接。 https://angular.io/guide/pipes

更多关于如何使用 HTTPS 模块和 hot 调用后端的例子在这里： https://angular.io/tutorial/toh-pt6

简而言之，管道就像Javascript 中的map 或filter 实用程序，因此想法是在将日期返回给UI 组件之前对其进行过滤。

a dummy example

1. getUserByAge()
2. getUserByLocation()

return this.service.getUsers().pipe( users => getUserByAge(users))

因此，您在这里将所有数据通过管道传输到某些实用程序函数并过滤，例如 user.age > 18 或使用 getUserByLocation 您仅过滤来自美国的用户

文档是你的朋友，所以大多数时候你会在那里找到需要的任何东西。