Angular/Typescript Class Getter 属性不起作用

Question

我有一个类，如下所示

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 View 如下所示

<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 属性，这会像这样工作吗？或者我应该创建一个 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);

 }

Answer 1

这是因为当你在 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你需要循环播放你的一系列故事。