Angular 6中如何将DreamFactory API响应映射到自定义Brand类？

嗨，恭喜你已经成功打通了和DreamFactory的API通信！接下来咱们来搞定字段映射的问题，其实只需要对响应数据做一层转换，就能把API返回的snake_case字段对应到你Brand类里的camelCase属性。

步骤1：给Brand类添加映射方法（可选但推荐） #

为了让代码更整洁、易维护，咱们可以给Brand类加一个静态方法，专门用来把API返回的JSON对象转换成Brand实例：

// ../models/brand.ts
export class Brand{ 
  id: number; 
  name: string; 
  displayOrder: number; 
  isVisible: boolean;

  // 静态方法：从API返回的JSON生成Brand实例
  static fromJson(apiJson: any): Brand {
    const brand = new Brand();
    brand.id = apiJson.id;
    brand.name = apiJson.name;
    brand.displayOrder = apiJson.display_order; // 映射display_order到displayOrder
    brand.isVisible = apiJson.visible; // 映射visible到isVisible
    return brand;
  }
}

步骤2：修改Data Service中的getBrands方法 #

Angular 6+使用的是HttpClient，而且rxjs的操作符需要通过pipe来调用，咱们修改你的getBrands方法，提取resource数组并完成映射：

首先确保你已经导入了必要的操作符：

// data.service.ts顶部
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Brand } from '../models/brand';

然后修改getBrands方法：

getBrands() {
  this.http.get<{ resource: any[] }>(`${this.baseUrl}brand?api_key=${this.APP_API_KEY}`)
    .pipe(
      map(response => {
        // 遍历resource数组，把每个JSON对象转换成Brand实例
        return response.resource.map(brandJson => Brand.fromJson(brandJson));
      })
    )
    .subscribe(brands => {
      console.log(brands);
      this.brands = brands; // 现在this.brands是Brand[]类型啦
    });
}

如果你不想用静态方法，也可以直接在map里处理 #

如果觉得静态方法有点繁琐，也可以直接在管道的map操作里完成映射：

.pipe(
  map(response => {
    return response.resource.map(json => {
      return {
        id: json.id,
        name: json.name,
        displayOrder: json.display_order,
        isVisible: json.visible
      } as Brand;
    });
  })
)

关键说明 #

• 使用HttpClient.get<{ resource: any[] }>是为了给TypeScript提供类型提示，明确响应结构是包含resource数组的对象
• pipe(map(...))是Angular 6+推荐的rxjs操作符使用方式，用来转换响应数据
• 不管用哪种方式，核心都是把API返回的display_order和visible字段，分别赋值给Brand类的displayOrder和isVisible属性

这样处理之后，this.brands就会是一个Brand[]类型的数组，每个元素都符合你定义的Brand类结构啦！

内容的提问来源于stack exchange，提问作者Research Stuff