Angular / Typescript Class Getter 属性不起作用答案

【问题标题】：Angular / Typescript Class Getter property not workingAngular / Typescript Class Getter 属性不起作用
【发布时间】：2018-07-06 06:32:30
【问题描述】：

我有一个如下所示的类

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"，故事是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);

 }

【问题讨论】：

请给minimal reproducible example;你如何创建故事对象？我也很惊讶 TypeScript 没有抛出错误，指出你的 getter 没有返回字符串。
我猜这个故事实际上并不是 Story 的一个实例：您可能会将这些故事作为对 HTTP 请求的 JSON 响应来获取。但是 HTTP 永远不会创建任何类的实例。
你应该在你的 app.component.ts 中像public story = new Story ; 一样定义它
这几乎无关紧要。您需要提供的是创建这些 Story 实例的代码，即您拥有 new Story() 的代码。或者更好的是，重现问题的完整最小示例。如果您在任何地方都没有 new Story()，那么您永远不会构建任何 Story 实例。
您实际上并没有创建类实例，提供类型提示不会导致任何转换或转换。这就是@JBNizet 已经说过的；您需要映射到 new Story 才能使访问器工作。

标签： angular typescript getter

【解决方案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，并且您需要循环播放您的一系列故事。

【讨论】：

【解决方案2】：

除非您创建一个新实例，否则您的 getter 将无法工作。同样，当您放置故事：Story[] 时，您只是在说可以安全地假设 Stories 将包含 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>

【讨论】：

是的，我想我应该这样做，而不是为我的每个数组项创建对象。谢谢
是的，为每个对象创建实例并不是一个好的解决方案。