Angular 4 HttpClient Datenabbildung

Question

Ich habe eine API, die ISO-Datum zurückgibt, das in Javascript-Datum umgewandelt werden muss. Ich verwende das HTTPClient-Modul, das die Zuordnung automatisch durchführt, aber es scheint, dass es die empfangenen Daten nicht transformiert.

Ich weiß, dass es funktioniert, wenn ich es mit dem HTTP-Modul, aber ich möchte den HTTPClient verwenden.

Mein Code ist unten.

export class Product{ 
    datetime: string; 
    qty: number; 
    constructor(date: string, hr: number) { 
     this.datetime = new Date(Date.parse(date)); 
     this.heartrate = hr; 
     } 
    } 



    @Injectable() 
    export class BandHeartRate { 

     private Url = 'http://192.168.1.1:6000'; 
     constructor(private http: HttpClient) {} 

    public getProduct(): Observable<Product[]> { 

      return this.http.get<Product[]>(`${this.Url}/web/api/v2/product`, 
    {headers: this.getHeader()}); 

     } 

     private getHeader() { 
      const header = new HttpHeaders(); 
      header.append('Accept' , 'application/json'); 
      return header; 
     } 
    } 
    } 

Answer 1

Die Antwort auf Ihren HTTP-Aufruf wird ein JSON-Objekt sein. JSON hat keine Darstellung von Daten per se, daher werden Ihre Daten als Strings im Ergebnis dargestellt. Sie haben richtig erkannt, dass Sie diese Zeichenfolgen manuell in Daten umwandeln müssen.

Ihr Code ist grob korrekt, aber Sie gehen davon aus, dass Sie einfach den JSON-Code in eine -Instanz konvertieren können. Das wird nicht funktionieren. Es würde funktionieren, wenn Product eine Schnittstelle wäre, keine Klasse (um eine Instanz einer Klasse zu erstellen, müssen Sie ihren Konstruktor aufrufen, und Ihr Code tut das nirgendwo).

Eine schnelle Lösung ist Ihre Berufung Code wie folgt zu ändern:

this.http.get(`${this.Url}/web/api/v2/product`, 
    {headers: this.getHeader()}) 
.map(productList => productList.map(productJson => new Product(productJson))); 

Diese Konstrukte Product Instanzen der JSON mit aufgenommen (die ersten map sagen Sie das Ergebnis des beobachtbar verwandelt wollen, die zweiten map Transformationen jedes Element in Ihrem JSON-Array von JSON zu Products).

Der Product Konstruktor wird die JSON für ein einzelnes Objekt erhalten, so müssten Sie es ändern etwas zu:

export class Product { 
    date: Date 
    hr: number 

    constructor({dateAsString, hr}) { 
     this.date = new Date(dateAsString); 
     this.hr = hr 
    } 
} 

Wenn Sie über die ({dateAsString, hr}) Syntax sich fragen,, google „Funktionsparameter Destrukturierung“.