Angular / Typescript Class Getter 属性不工作

Question

我有一个class如下图

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 属性，这会像这样工作吗？或者我应该创建一个 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[] 时，您只是在告诉我们假设 Stories 将包含 Story class 中的属性是安全的。打字稿不会有 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 并且你需要循环你的故事数组。

Angular / Typescript Class Getter 属性不工作

Angular / Typescript Class Getter property not working

getter

typescript

angular

Angular / Typescript Class Getter 属性 不工作

Angular / Typescript Class Getter property not working

getter

typescript

angular

Angular / Typescript Class Getter 属性不工作