Десериализация даты правильно в угловых 5 - PullRequest
Новая
       32

Десериализация даты правильно в угловых 5

0 голосов
/ 01 июля 2018

Angular 5, похоже, неправильно десериализует 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 [], который можно наблюдать, содержал массив реальных дат myDates, что подтверждается успешным вызовом getMonth () для одной из них. В идеале это преобразование должно происходить в службе, поэтому оно должно быть только в одном месте.

Спасибо

1 Ответ

0 голосов
/ 01 июля 2018

Вместо использования 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;
  }

В этом коде мы передаем Observable через собственную функцию .map, чтобы преобразовать результаты. В ваших компонентах вы можете подписаться как обычно.

...