Angular TypeScript Date.getFullYear () не является функцией при возврате Observable с сервера - PullRequest
Новая
       68

Angular TypeScript Date.getFullYear () не является функцией при возврате Observable с сервера

0 голосов
/ 05 августа 2020

Я пытаюсь отобразить данные следующим образом: 

    <a *ngFor="let month of months">
      <div>
        <h4>{{month.name + month.date.getFullYear()}}</h4>
        <p *ngFor="let topic of month.topics">
            <span>{{topic.description}}</span>
            <li *ngFor="let item of topic.items">
                <span>{{item.content}}</span>
            </li>
        </p>
      </div>
    </a>

Это отлично работает, когда я использую данные stati c Month [], например: 

export const MONTHS: Month[] = [
    { id: 0, name: "September ", date: new Date(2020, 9), topics:[{id: 0, description: "I need a new description", items: [{ id: 0, content: "I need a new todo", isDone: false}]}]},
    { id: 1, name: "August ", date: new Date(2020, 8), topics:[{id: 0, description: "I need a second description", items: [{ id: 0, content: "I need a second todo", isDone: false}]}]},
];

Однако когда я пытаюсь получить Month [] с сервера в памяти следующим образом: 

///The database
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const months = [
      { id: 0, name: "September ", date: new Date(2020, 9), topics:[{id: 0, description: "I need a new description", items: [{ id: 0, content: "I need a new todo", isDone: false}]}]},
      { id: 1, name: "August ", date: new Date(2020, 8), topics:[{id: 0, description: "I need a second description", items: [{ id: 0, content: "I need a second todo", isDone: false}]}]},
    ];
    return {months};
  }
}

///The month.service
/** GET months from the server */
  getMonths(): Observable<Month[]> {
    return this.http.get<Month[]>(this.monthsUrl)
      .pipe(
        tap(_ => this.log('fetched months')),
        catchError(this.handleError<Month[]>('getMonths', []))
      );
  }

///the .ts component of the html display
export class CurrentMonthComponent implements OnInit {
  months: Month[];

  constructor(private monthService: MonthService) { }

  ngOnInit(): void {
    this.getMonths();
  }

  getMonths(): void {
    this.monthService.getMonths()
    .subscribe(months => this.months = months);
  }

}

В этот момент строка month.date.getFullYear () в html выдает это исключение: 

core.js:4197 ERROR TypeError: month_r1.date.getFullYear is not a function
    at CurrentMonthComponent_a_3_Template (current-month.component.html:6)

Почему он больше не понимает, что дата является объектом Date, когда получает ее с сервера? Разве метод getMonths () не должен возвращать Month [], который определяет дату как Date? Или это имеет отношение к наблюдаемым rx js? Вот мой интерфейс month.ts для справки. Спасибо! 

export interface Month {
    id: number;
    name: string;
    date: Date;
    topics: Array<Topic>;
}

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Я думаю, что свойство date - это просто тип Date , а не фактический объект Date .

Либо при назначении даты this.months массив, вам нужно преобразовать ответ BE в фактический объект Date , тогда ваш фрагмент кода будет работать

OR 

<h4>{{month.name + (new Date(month.date)).getFullYear()}}</h4>
0 голосов
/ 08 августа 2020

Спасибо за помощь, он указал мне в правильном направлении, чтобы понять, что моя дата сохранялась не как Date , а как строка, которую затем нужно было бы преобразовать обратно в Дата .

Что наконец сработало и позволило мне вызвать getFullYear () в этом теге h4, так это добавление этой карты в .pipe () в моем методе http get 

map(months => months.map(month => ({...month, date: new Date(month.date)}))),

Это изменило его обратно на объект Date , на котором я смог вызвать getFullYear ().

...