问题描述
我正在努力正确设计 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));
}
我的后端以正确的方式返回了这些对象的列表,但前端日志中的结果如下:
因此,由于我对 Angular 和前端开发还很陌生,所以我遇到了以下问题:
- 怎么可能,只有一个元素作为实际对象返回,而所有其他元素都由数据库 ID 表示?
- 获取需要在渲染前转换的数据的最佳实践是什么(例如:从端点调用数据,从中构建一个 ChartJs 图表(我们必须等待 Observable/Promise 完成),然后渲染它到 HTML)?
抱歉问了这么长的问题,我是前端开发的新手,正在寻找最佳实践解决方案。
提前致谢!
解决方法
这里有两个选项,一个是根据您在请求正文中发送的参数过滤后端的数据,第二个选项是您获取所有数据,然后使用管道过滤掉数据和在 UI 中返回你需要的数据,你也可以让这个管道接收参数并且更通用。
这是关于如何在 Angular 中使用管道的链接。 https://angular.io/guide/pipes
有关如何使用 HTTPS 模块和 hot 调用后端的更多示例: https://angular.io/tutorial/toh-pt6
用两个词来说,管道就像 map
或 filter
实用程序,您在 Javascript
中使用的方法是在将日期返回给 UI 组件之前对其进行过滤。
a dummy example
1. getUserByAge()
2. getUserByLocation()
return this.service.getUsers().pipe( users => getUserByAge(users))
因此,在这里您将所有数据通过管道传输到某些实用程序函数,并进行过滤,例如 user.age > 18
或使用 getUserByLocation
过滤仅来自美国的用户
文档是您的朋友,因此大多数时候您都可以在那里找到所需的任何东西。