Angular/Typescript类Getter属性不工作

我有一个如下所示的类

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';
    }
}

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

HTML视图如下所示

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';
    }
}

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

}

stories（）{
返回this.http.get（this.baseUrl+'/story/list/'，this.httpOptions）；
}

除非创建新实例，否则getter将无法工作。 另外，当您放置stories:Story[]时，您只说明假设stories将包含Story类中的属性是安全的。打字稿不会说有一个getter

既然你在ngFor里面，我建议用一根管子

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>

{{story.utcDate | displayDate}

这是因为当您在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

---

但这意味着你必须有一个

构造函数

，你需要循环你的故事数组；如何创建故事对象？另外，我很惊讶TypeScript没有抛出一个错误，指出getter没有返回字符串。我猜这个故事实际上并不是故事的一个实例：您可能将这些故事作为对HTTP请求的JSON响应。但是HTTP永远不会创建任何类的实例在app.component.ts中，这几乎是不相关的。您需要提供的是创建这些故事实例的代码，即

newstory（）

所在的代码。或者更好，一个完全最小的例子再现了这个问题。如果您没有

new Story（）

任何地方，那么您永远不会构造任何故事实例。您实际上不是在创建类实例，给出类型提示不会导致任何强制转换或转换。这是@JBNizet已经说过的话；你需要映射到

newstory

，访问者才能工作。是的，我认为我应该这样做，而不是为我的每个数组项创建对象。谢谢，为每个对象创建实例不是一个好的解决方案。

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