각도 4 HttpClient 데이터 매핑

Question

자바 스크립트 날짜로 변환해야하는 ISO 날짜를 반환하는 API가 있습니다. 자동으로 매핑을 수행하는 HTTPClient 모듈을 사용하고 있지만 수신 된 데이터를 변환하지 않는 것 같습니다.

HTTP 모듈을 사용하면 작동하지만 HTTPClient를 사용하고 싶습니다.

내 코드는 아래에 있습니다.

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

http 호출에 대한 응답은 JSON 객체입니다. JSON은 본질적으로 날짜를 표현하지 않으므로 날짜가 문자열에 결과로 표시됩니다. 이 문자열을 수동으로 날짜로 변환해야한다는 것을 올바르게 인식했습니다.

코드는 대략 정확하지만, 반환 된 JSON을 Product 인스턴스로 캐스팅 할 수 있다고 가정합니다. 그것은 작동하지 않습니다. Product이 인터페이스가 아니라 클래스 인 경우 작동합니다 (클래스의 인스턴스를 생성하기 위해 생성자를 호출해야하며 코드는 아무 곳에서나 수행하지 않습니다).

한 빠른 수정은 다음과 같이 호출 코드를 변경하는 것입니다 :

이

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

이것은 JSON을 사용하여 Product 경우 수신 구축 (첫 번째 map는 관찰의 결과, 두 번째 map 변환을 변환 할 말한다 JSON 배열에서 각 항목을 JSON에서 Products로 변환).

제품 생성자는 하나의 개체에 대한 JSON을 받게됩니다, 그래서 당신은 너무 약간을 수정해야 할 것입니다 : 당신이 ({dateAsString, hr}) 구문에 대해 궁금해하는 경우

export class Product { 
    date: Date 
    hr: number 

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

, "함수 매개 변수 destructuring을"구글.