[英]Angular / Typescript Class Getter property not working
I've a class as shown below 我有一个课,如下所示
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 view is shown below HTML视图如下所示
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{story.displayDate}}
</span>
Here, the html code block is inside and ngFor loop as *ngFor="let story of stories"
and stories is an array of type Story , stories: Story[];
在这里,html代码块位于ngFor循环内,并为
*ngFor="let story of stories"
而*ngFor="let story of stories"
是一个类型为Story的数组, stories: Story[];
But its not displaying anything . 但是它什么也没显示。 No error also.
也没有错误。 What am I doing wrong here?
我在这里做错了什么? Will this work like this without an explicit setter property?
没有显式的setter属性,是否可以像这样工作? Or should I create a setter property and set the value manually?
还是应该创建一个setter属性并手动设置值?
edit: below my script that populate the story array and the service function 编辑:在我的脚本下方,该脚本填充了故事数组和服务功能
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);
}
Your getter wont work unless you create a new instance. 除非您创建一个新实例,否则您的获取器将无法工作。 Also when you are putting stories: Story[], you are only telling that it is safe to assume Stories will contain properties in Story class.
同样,当您放置故事时:Story [],您只是在说假设Stories包含Story类中的属性是安全的。 Typescript wont that there is a getter.
打字稿不会有吸气剂。
Since you are inside ngFor, I suggest using a Pipe. 由于您位于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();
}
}
then in your template make slight modification like this. 然后在模板中进行如下修改。
<span>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{story.utcDate | displayDate }}
</span>
This is because when you cast in Typescript, you don't get the methods. 这是因为当您键入Typescript时,没有方法。 So imagine you have this :
想象一下你有这个:
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
So instead, you need to create a new object 因此,您需要创建一个新对象
const story = new Story(data.id, data.title, data.storyText, data.utcDate);
console.log( story.displayDate ); // Will work !
But that mean you must have a constructor
and you need to loop on your array of stories. 但这意味着您必须有一个
constructor
并且需要遍历所有故事。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.