Свойство класса Angular / Typescript Class не работает - PullRequest
Новая
       11

Свойство класса Angular / Typescript Class не работает

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

У меня есть класс, как показано ниже 

export class Story {
    id: number;
    title: string;
    storyText: string;
    utcDate: string;
    get displayDate(): string {
       const today = new Date();
       const postDate = new Date(this.utcDate);
       const td = today.getTime();
       const pd = postDate.getTime();
       return ((td-pd)/1000)+'ms';
    }
}

Вид HTML показан ниже 

<span>
   <i class="fa fa-clock-o" aria-hidden="true"></i>
   {{story.displayDate}}
</span>

Здесь блок html-кода находится внутри, а цикл ngFor - как *ngFor="let story of stories", а Stories - это массив типа Story, stories: Story[]; Но ничего не отображается. Нет ошибки тоже. Что я здесь не так делаю? Будет ли это работать без явного свойства сеттера? Или я должен создать свойство setter и установить значение вручную?

редактирование: ниже моего скрипта, который заполняет массив рассказов и сервисную функцию 

loadData() {
this.storyService.stories()
.subscribe(
data => {
  const response = <Story[]>data.message;
  this.stories = response;
},
error => {
    alert('error');
});

} 

    stories() {
          return this.http.get<Result>(this.baseUrl + '/story/list/', this.httpOptions);

 }

Ответы [ 2 ]

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

Это потому, что когда вы приводите Typescript, вы не получаете методы. Итак, представьте, что у вас есть это: 

const data = {
    id: 1;
    title: 'foo';
    storyText: 'bar';
    utcDate: '01-01-2000';
}

const story = data as Story;
// OR
const story = <Story> data;

console.log( story.displayDate ); // Wrong, because the method doesn't exist

Итак, вместо этого вам нужно создать новый объект 

const story = new Story(data.id, data.title, data.storyText, data.utcDate);
console.log( story.displayDate ); // Will work !

Но это означает, что у вас должно быть constructor, и вам нужно зацикливаться на множестве историй.

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

Ваш геттер не будет работать, если вы не создадите новый экземпляр. Кроме того, когда вы помещаете истории: Story [], вы только говорите, что можно с уверенностью предположить, что истории будут содержать свойства в классе Story. Typescript не будет, что есть геттер.

Поскольку вы находитесь внутри ngFor, я предлагаю использовать Pipe. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'displayDate'
})
export class DisplayDatePipe implements PipeTransform {

  transform(value: any): string {
    const today = new Date();
    const postDate = new Date(value);
    const td = today.getTime();
    const pd = postDate.getTime();
    return ((td-pd)/1000).toString();
  }

}

тогда в вашем шаблоне сделайте небольшую модификацию вот так. 

<span>
   <i class="fa fa-clock-o" aria-hidden="true"></i>
   {{story.utcDate | displayDate }}
</span>
...