Question

我有一个api，它返回需要转换为javascript日期的ISO日期。我正在使用自动执行映射的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表示要转换Observable的结果，第二个map从JSON转换JSON数组中的每个项目到产品）。

Product构造函数将接收单个对象的JSON，因此您需要稍微修改它：

export class Product {
    date: Date
    hr: number

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

如果您想知道({dateAsString, hr})语法，请参阅google“function parameter destructuring”。

Angular 4 HttpClient数据映射

1 个答案: