3

我正在尝试编写一个连接到 DreamFactory API 的 Angular 6 服务。

我已设法从允许 DreamFactory 管理的数据库中的“品牌”表中提取 json 数据。我能够向 API 发送获取请求，因此通讯没有问题。下面是一个示例：

{
  "resource": [
    {
      "id": 1,
      "name": "Apple",
      "display_order": 1,
      "visible": true
    },
    {
      "id": 2,
      "name": "Dell",
      "display_order": 6,
      "visible": true
    },
    {
      "id": 3,
      "name": "HP",
      "display_order": 5,
      "visible": true
    },
    {
      "id": 4,
      "name": "HTC",
      "display_order": 4,
      "visible": true
    },
    {
      "id": 5,
      "name": "Samsung",
      "display_order": 2,
      "visible": true
    },
    {
      "id": 6,
      "name": "Sony",
      "display_order": 3,
      "visible": true
    }
  ]
}

我正在努力处理数据的格式：

如何将“资源”响应中的字段映射到我在 Angular 中创建的类？我已将“brand.ts”导入“data.service.ts”。我已经在“app.module.ts”和“data.service.ts”等所有正确的地方导入了HTTPClient，并在constructor() {}等中使用了它。

'../models/brand.ts'

export class Brand{
    id: number;
    name: string;
    displayOrder: number;
    isVisible: boolean;
}

'../services/data.service.ts'</p> 

...
    getBrands() {
        this.http.get(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
          .map((data: Response) => {
            return data;
          })
          .subscribe((data => {
            console.log(data);
            this.brands = data;
          })
          );
      }

...

通过在控制台日志中使用上面的代码，我的数据输出如下：

资源：（6）[…]

0: 对象 { id: 1, name: "Apple", display_order: 1, ... }

1: 对象 { id: 2, name: "Dell", display_order: 6, ... }

2: 对象 { id: 3, name: "HP", display_order: 5, ... }

3: 对象 { id: 4, name: "HTC", display_order: 4, ... }

4: 对象 { id: 5, name: "Samsung", display_order: 2, ... }

5：对象{ id：6，名称：“索尼”，display_order：3，...}

长度：6 …</p>

如何修改我的代码以将数据映射到我的班级？例如，字段“display_order”需要映射到我的 Angular 类属性“displayOrder”等。任何帮助将不胜感激，因为我是 Angular 的菜鸟。

4

3 回答 3

0

像这样向你的类类型添加一个构造函数：

export class Brand {
  id: number;
  name: string;
  displayOrder: number;
  isVisible: boolean;

  constructor(item) {
    this.id = item.id;
    this.displayOrder = item.display_order;
    // set rest of variables
  }
}

然后管道响应并创建一个新对象，将您的字段映射到正确的字段，如下所示：

  getBrands(url: string): Observable<Brand[]> {
    return this.http.get(url).pipe(map((data: any[]) => {
      const res: Brand[] = [];
      data.map((item) => {
        res.push(new Brand(item));
      });
      return res;
    }));
  }

我将其设置为服务的返回，因为您应该将此 Observable 返回到服务之外的组件代码，然后在那里订阅。Brand这将输出一个带有映射字段的数组

构造函数中的字段设置将允许您将 的字段设置displayOrder为 的传入数据display_order。

希望这能有所帮助！

于 2018-06-01T17:08:58.880 回答
0

感谢您的建议。需要考虑的是 JSON 中的“资源”键！

{
  "resource": [
    {
      "id": 1,
      "name": "Apple",
      "display_order": 1,
      "visible": true
    },
    {
      "id": 2,
      "name": "Dell",
      "display_order": 6,
      "visible": true
    },
    {
      "id": 3,
      "name": "HP",
      "display_order": 5,
      "visible": true
    },
    {
      "id": 4,
      "name": "HTC",
      "display_order": 4,
      "visible": true
    },
    {
      "id": 5,
      "name": "Samsung",
      "display_order": 2,
      "visible": true
    },
    {
      "id": 6,
      "name": "Sony",
      "display_order": 3,
      "visible": true
    }
  ]
}

我设法使用以下方法成功：

品牌.ts

export interface Brand {
  id: number;
  name: string;
  display_order: number;
  visible: boolean;
}

数据服务.ts

  getBrands(): Observable<Brand[]> {
    return this.http.get<Brand[]>(this.baseUrl + 'brand' + '?api_key=' + this.APP_API_KEY)
    .pipe(
      map(res => res['resource'])
    );
  }
于 2018-06-06T08:23:12.193 回答
-2 
this.http.get<Array<Brand>>('/whateverurl).subscribe( ...

不要忘记导入品牌类/接口

编辑：如果它是一个数组，你需要<Array<Brand>>

于 2018-06-02T00:54:39.250 回答