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

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

  •  2
  • Glinkot  · 技术社区  · 6 年前

    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 回复  |  直到 6 年前
        1
  •  3
  •   user184994    6 年前

    而不是使用 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;
      }
    

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