时间戳

首页 > 解决方案 > Angular Services：Promise 返回奇怪的结果

angular - Angular Services：Promise 返回奇怪的结果

问题描述

我正在努力正确设计 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） ?

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

提前致谢！

标签： angulartypescriptangular-services

解决方案

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

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

有关如何使用 HTTPS 模块和热调用后端的更多示例： https ://angular.io/tutorial/toh-pt6

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

a dummy example

1. getUserByAge()
2. getUserByLocation()

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

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

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

推荐阅读