Angular 5, HttpClient, подписка не отображается должным образом

Из api получите некоторые данные в массив JSON, как:

[{"id":19,"date":{"date":"2017-09-10 10:58:40.000000","timezone_type":3,"timezone":"Europe/Paris"},"user":{"nom":"castro","prenom":"diana","mail":"[email protected]","telephone":"0645507509","adresse":"21 rue durand","codePostal":"31200","ville":"Quartier Borderouge","prixDeVente":"1 250 000","commentaire":""},"feature":{"type":"Terrain + Maison","tailleParcelle":"2000 à 2500m²","longueurFacade":"10 à 12m","estimationVente":"1 000 000 à 1 250 000€","isVendeur":"Non","voisinVendeur":"Ne sait pas","alreadyMeetPromoteur":"Non","howManyProposition":"Aucune","alreadyPromise":"Non","saleDelay":"1 à 2 ans"}}]

Создайте интерфейс для обработки ответа:

import { QuotationInterface } from './quotationinterface';

export interface QuotationsResponse {
  results: Array<QuotationInterface>;
}

QuotationInterface следующий:

import { DateInterface } from './dateinterface';
import { UserInterface } from './userinterface';
import { FeatureInterface } from './featureinterface';

export interface QuotationInterface {

  id: number;

  date: DateInterface;

  user: UserInterface;

  feature: FeatureInterface;
}

Сервис, загружающий данные:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

import { Constants } from './../constants/constants';
import { QuotationsResponse } from './../interfaces/quotationsresponse';

@Injectable()
export class WebapiService {

  constructor(private http: HttpClient) { }

  public getQuotations(): Observable<QuotationsResponse> {
    return this.http.get<QuotationsResponse>(Constants._WEB_API_ROOT + 
   'quotations');
  }

}

И, наконец, метод получения данных:

  public getQuotations(): Promise<QuotationCollection> {
  return new Promise((resolve) => {
    this.webApi.getQuotations().subscribe((quotations) => {
      console.info('Quotations : ' + JSON.stringify(quotations));
      this._quotations = quotations;
      console.info('Quotations : ' + typeof this._quotations);
      // Alimente la collection elle-même
      for (let quotation of this._quotations.results) {
        console.info('quotation : ' + JSON.stringify(quotation));
        this.hydrate(quotation.id, quotation);
      }
      resolve(this);
    });
  });

  }

Конкретные типы (средняя дата) изготавливаются следующим образом:

import { DateInterface } from './../interfaces/dateinterface';
import { DeserializableInterface } from 
'./../interfaces/deserializableinterface';

import * as moment from 'moment';

export class Date implements DateInterface, DeserializableInterface<Date> {
  date: string;
  timezone_type?: number;
  timezone?: string;

  public getDate(): moment.Moment {
    return moment(this.date);
  }

  public deserialize(input: any): Date {
    console.info('Deserialisation : ' + JSON.stringify(input));
    Object.assign(this, input);
    return this;
  }
}

Итак ... Когда приложение запускается:

api вызывается правильно, данные возвращаются, но если я консолью "котировки", получил "Object", когда я ожидаю "QuotationsResponse", внутренний объект (пользователь, дата, функция) тоже является объектом, поэтому метод "getDate ()" неизвестно ...

Что я делаю не так?

Спасибо

Где ваша функция hydrate?

user184994 14.04.2018 19:50

Hydrate - это просто метод, который загружает объект Map: this.collection.set (id, quote)

Jean-Luc Aubert 14.04.2018 19:51
<QuotationsResponse> - это всего лишь намек, он не вызывает никакого преобразования или преобразования. Это не могу, потому что TS не существует во время выполнения.
jonrsharpe 14.04.2018 19:54

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

Anshuman Jaiswal 14.04.2018 19:55

Возможный дубликат Нет методов в объекте ответа http

jonrsharpe 14.04.2018 19:55

Итак ... Это означает, что мне нужно сопоставить объекты в методе getQuotations ()?

Jean-Luc Aubert 14.04.2018 19:58
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
6
402
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Приведение типов не может быть выполнено в ответ, вам нужно будет сделать это как:

public getQuotations(): Promise<QuotationCollection> {
  return new Promise((resolve) => {
    this.webApi.getQuotations().subscribe((quotations) => {
      console.info('Quotations : ' + JSON.stringify(quotations));
      this._quotations = quotations;

      console.info('Quotations : ' + typeof this._quotations);
      // Alimente la collection elle-même
      for (let quotation of this._quotations.results) {
        // =========== HERE =============== //
        quotation.date = Object.assign(new Date(), this.quotation.date);
        console.info('quotation : ' + JSON.stringify(quotation));
        this.hydrate(quotation.id, quotation);
      }
      resolve(this);
    });
  });
}

Я бы также предложил переименовать класс Date, чтобы никто не запутался с классом JS 'Date

Другие вопросы по теме