代码之家 › 专栏 › 技术社区 › Glinkot

以角度5正确反序列化日期

observable type-conversion typescript angular

2

Glinkot · 技术社区 · 7 年前

Angular5似乎没有正确地将JSON从API反序列化为日期,至少在数组中没有。我有一个这样的模型,上面有一系列日期:

    export interface ProcessDefinition {
    _id?: string;  
    processDefinitionName: string;
    myDates: Date[];
}

我有一个服务类,它使用httpclient返回一个可观察的类,如下所示:

    public getItems(): Observable<ProcessDefinition[]> {
    let url = this.apiUrl + this.entityName + '/';

    this.loggerService.log(`Getting items with observable via http.`);
    this.loggerService.log(`URL: ` + url);

    return this.httpClient.get<ProcessDefinition[]>(url);
}

我从组件调用该服务,如下所示:

public loadProcessDefinitionData(): void {
    this.processDefinitionService.getItems().subscribe(items => {

        this.processDefinitions = items;

        // Does not help
        // this.processDefinitions.forEach(processDef =>
        //     processDef.day1dates.forEach(day1d =>
        //         day1d = new Date(day1d))
        // );

        this.currentProcessDefinition = this.processDefinitions[0] || null;

        // Nope
        this.currentProcessDefinition.day1dates.forEach(dat => dat = new Date(dat));

        // Would like this to work, confirming it's a real date.
        console.log(JSON.stringify(this.currentProcessDefinition.day1dates[0].getMonth()));

    });
}

上面显示了我在其他问题中讨论的使用“新日期”方法将数据转换为“实际日期”的错误尝试。我相信对于更熟悉语法的人来说,这很简单。

我想要的是processdefinition[]observate包含一个实数日期的mydates数组,可以通过在其中一个上成功调用getmonth()来确认。理想情况下,这种转换将发生在服务中,因此它只需要在一个地方。

谢谢

1 回复 | 直到 7 年前

1

3

user184994 7 年前

而不是使用 forEach ,使用数组 .map 功能,所以:

this.currentProcessDefinition.day1dates = this.currentProcessDefinition.day1dates.map(dat => new Date(dat))

或者,如果您想在您的服务中这样做,您可以这样做:

  import { map } from 'rxjs/operators'

  getItems() {
    let url = this.apiUrl + this.entityName + '/';

    return this.http.get(url).pipe(
      // Map through each item in res, and format the object
      map((res) => res.map(item => this.formatDates(item)))
    )
  }

  formatDates(results) {
    // Map through each date and replace with Date objects
    results.day1dates = results.day1dates.map(dat => new Date(dat));
    return results;
  }

在这段代码中,我们通过它自己的管道 .地图 函数,以转换结果。在组件中,您可以像往常一样订阅。