Question

Angular 5似乎没有正确地将API中的json反序列化为日期，至少不是在数组中。我有一个带有日期数组的模型：

    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 []，它可以观察到包含真实日期的myDates数组，可以通过成功调用getMonth（）来确认。理想情况下，此转换将在服务中进行，因此只需将其放在一个位置即可。

谢谢

Answer 1

使用数组.map，而不是使用forEach，所以：

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;
  }

在这段代码中，我们通过它自己的.map函数传递Observable，以转换结果。在组件中，您可以照常订阅。

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

1 个答案: