角度/打字稿类 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 循环作为*ngFor="let story of stories"和故事是一个类型的数组 故事 ，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 将无法工作。 此外，当您放置 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>

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，你需要循环你的故事阵列。