Angular / Typescript 类 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 视图如下所示

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

这里，html代码块在里面，ngFor循环as*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

除非您创建一个新实例，否则您的 getter 将无法工作。此外，当您放置故事： Story[] 时，您只是告诉我们可以安全地假设故事将包含 Story 类中的属性。Typescript 不会有 getter。

由于您在 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>

Answer 2

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