Question

如何在Angular中将HttpClient响应转换或转换为自定义类对象的数组？

我有一个提供者，例如：

import { Client } from '../../models/client.model';

@Injectable()
export class ClientProvider {

  clients: Client[] = [];
  url = "link/to/api/clients" //Should return an array of clients

  constructor(public http: HttpClient){ }

  getClient() {
     this.http.get(this.url)
  .subscribe(
      (response) => {
        this.clients = response as Client[];
        console.log(this.clients[0]) // this works and shows the client info
        console.log(this.clients[0].getName()); //this gives error (1)
       });
  }

错误：

错误TypeError：_this.clients [0] .getName不是函数

我什至尝试

(response: Client[]) => {
   this.clients = response ...}}

但这给了我同样的错误。

我的模型定义如下：

export class Client{
    id: number;
    name: string;

    getName() {
    return this.name;
    }
}

Answer 1

这行不通。当您收到JSON响应时，该框架为您执行的所有操作就是将该JSON解析为纯对象。每个类型声明或转换都没有意义，并且仅在编译时有效（作为IDE的类型提示和Transpiler的简短类型控制）。

没有Client类的实例可以在其上调用方法。

如果要使其成为类的实例，则必须首先映射整个响应，如下所示：

  getClient() {
     this.http.get(this.url)
     .pipe(
        map(plainJson=> create new Client here from json)// HER Eyou must create CLIENT yourself from plain javascript object
     )
  .subscribe(
      (response) => {
        this.clients = response as Client[];
        console.log(this.clients[0]) // this works and shows the client info
        console.log(this.clients[0].getName()); //this gives error (1)
       });

Answer 2

尝试这个console.log(this.clients[0].name);

这里不需要使用功能。

Answer 3

类型提示与强制转换不同。您无法执行$($("#thetable").find("tr")[0]).find("td").map(function(x) {return $(x).innerText;});并期望对象成为as Client类并在其中拥有所有方法。您需要对其进行映射：

Client

Answer 4

问题

您的方法存在的问题是，您正在尝试将响应分配给Client []数组。但是，只是将response data分配给client变量。

修复

如果要将响应转换为相应的模型类，则需要从模型类本身处理它。

ex：

在模型类中创建构造函数

出口舱客户{

constructor(obj?: any) {
   Object.assign(this, obj);
}

id: number;
name: string;

getName() {
return this.name;
}

}

getClient() {
     this.http.get(this.url)
  .subscribe(
      (response) => {
        let clients = this.response.map(item=>new Client(item)); //Create new instance of client and set the properties.
       });

注意：检查响应的类型。上面的实现当响应包含多个客户端时。

Answer 5

您可以直接发布您的回复并这样做

getClient() {
     this.http.get<Array<Client>>(this.url)
  .subscribe(
      (response) => {
        /*here you can directly iterate response and get Client objects*/
        for(let client in response){
         console.log(client.name);
         }

       });
  }

无法将HttpClient响应转换为对象数组

5 个答案:

问题

修复

ex：