Не удается преобразовать ответ HttpClient в массив объектов - PullRequest
Новая
       20

Не удается преобразовать ответ HttpClient в массив объектов

0 голосов
/ 22 октября 2018

Как я могу привести или преобразовать ответ HttpClient в массив пользовательских объектов класса в Angular?

У меня есть провайдер, например: 

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;
    }
}

Ответы [ 5 ]

0 голосов
/ 22 октября 2018

Вы можете напрямую разыграть свой ответ и сделать это 

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);
         }

       });
  }
0 голосов
/ 22 октября 2018

Issue

Проблема с вашим подходом заключается в том, что вы пытаетесь присвоить ответ массиву Client [].Однако это всего лишь присвоение переменной response data client.

Fix

Если вы хотите преобразовать ответ в соответствующий класс моделей, вам нужно обработать его из моделисам класс.

ex:

Создание конструктора в классе модели

экспортный класс Client {

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.
       });

Примечание. Проверьте тип ответа.Вышеприведенная реализация, когда ответ содержит несколько клиентов.

0 голосов
/ 22 октября 2018

Это не сработает.Когда вы получаете ответ JSON, все, что делает эта среда для вас, это синтаксический анализ этого JSON в простой объект.Каждое объявление типа или приведение не имеют смысла и действительны только во время компиляции (как подсказка типа для IDE и краткое управление типом для транспилятора).

Нет экземпляра класса 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)
       });
0 голосов
/ 22 октября 2018

Тип подсказки не совпадает с кастингом.Вы не можете выполнить as Client и ожидать, что объект станет классом Client и в нем будут все методы.Вам необходимо отобразить это: 

this.http.get(this.url).pipe(
    map((clients) => clients.map((client) => ({ ...new Client(), ...client})) 
  )
  .subscribe(
      (clients) => {
        console.log(clients[0]) // this works and shows the client info
        console.log(clients[0].getName());
});
0 голосов
/ 22 октября 2018

попробуйте console.log(this.clients[0].name);

Нет необходимости использовать здесь функцию.

...