Angular:以可重用/清除方法将API数据转换为新数据类型 [英] Angular: Convert API Data into New Data Type in Reusable/Clean Method

问题描述

我正在尝试将API响应转换为用于多个组件的完全不同的ViewModel.

I am trying to convert an API Response into a totally different ViewModel, for multiple components.

a)一种解决方案是直接在API代理中映射/管道数据，但是，如果我只想使用原始的原始API数据，则API代理不是很可重用.

a) One solution is to map/pipe the Data directly in the API proxy, however then API proxy is not very reusable, if I just want plain raw API Data.

b)此模型适配器模式可能不起作用，因为在示例中，适配器创建与API相同的数据对象类型. https://florimond.dev/blog/articles/2018/09/consumption-apis-in-angular-the-model-adapter-pattern/.下面我们的数据转换器，带来了完全不同的一个.

b) This model-adapter pattern may not work, since in the example the adapter creates the same Data Object Type as API. https://florimond.dev/blog/articles/2018/09/consuming-apis-in-angular-the-model-adapter-pattern/ . Our data converter below, brings out totally different one.

正在寻找其他好的解决方案.

Looking for any other good solutions.

常规API:

export class ProductService {
  private readonly apiUrl = environment.baseUrl + '/api/CalculateProducts/';
  constructor(private httpClient: HttpClient) { }

  getProductData(
    productValuationDtoRequest: ProductValuationDtoRequest
  ): Observable<ProductValuationResponse>  {
    return this.httpClient.request<ProductValuationResponse>('post', this.apiUrl,
      {body: productValuationDtoRequest}
    );
  }
}

数据转换器:

export class CalculateProductModelService {
  constructor() { }

  convertData(
    productValuationResponse: ProductValuationResponse): CalculateCostModel  {

    const calculateProductModel: CalculateProductModel = {
      valuationAttribute: productValuationResponse?.productValuationDetail[0]?.productValuationAttribute?.description,
      livingAreaQuantity: productValuationResponse?.productValuationDetail[0]?.quantity,
      livingAreaRate: productValuationResponse?.productValuationDetail[0]?.improvementUnitValue * 1.03,
      livingAreaValue: productValuationResponse?.productValuationDetail[0]?.attributeTotalImprovementValue,
      numberOfUnits: productValuationResponse?.numberOfUnits * 2,
      replacementCostNew: productValuationResponse?.replacementCostNew,
      goodPercentage: productValuationResponse?.percentageGood,
      goodValue: productValuationResponse?.replacementCostNew * (100 - productValuationDto?.percentageGood) / 100,
      total: productValuationResponse?.totalImprovementValue
    };
    return calculateProductModel;
  }

推荐答案

如果我理解正确的问题，我会向 ProductService 添加一个方法以返回模型，以便 ProductService 最终有2种方法，一种用于原始API数据，另一种用于模型.

If I understand the problem right, I would add a method to ProductService to return the Model, so that ProductService ends up having 2 methods, one for the raw API data and one for the model.

新方法将在内部使用当前的 getProductData 方法来获取数据，并使用 CalculateProductModelService 进行转换.

The new method would internally use the current getProductData method to fetch the data and the CalculateProductModelService to perform the transformation.

代码看起来像

export class ProductService {
  private readonly apiUrl = environment.baseUrl + '/api/CalculateProducts/';
  constructor(private httpClient: HttpClient, 
     private productModelService: CalculateProductModelService) { }

  getProductData(
    productValuationDtoRequest: ProductValuationDtoRequest
  ): Observable<ProductValuationResponse>  {
    return this.httpClient.request<ProductValuationResponse>('post', this.apiUrl,
      {body: productValuationDtoRequest}
    );
  }

  getProductModel(
    productValuationDtoRequest: ProductValuationDtoRequest
  ): Observable<CalculateProductModel>  {
    return this.getProductData(productValuationDtoRequest).pipe(
      map(rawData => productModelService.convertData(rawData))
    );
  }
}

在上面的示例中，我使用依赖注入将 CalculateProductModelService 注入到 ProductService 中.这样， CalculateProductModelService 不依赖于http调用，并且可以轻松进行测试.

In the above example I use Dependency Injection to inject CalculateProductModelService into ProductService. In this way CalculateProductModelService is not dependent on http calls and can be easily tested.

这篇关于Angular:以可重用/清除方法将API数据转换为新数据类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！