运行 ngFor 时组件内的类函数给出错误（不是函数）

Question

I'm trying to show a list of topics where every list entry is a custom component. I will describe my problem as a simple example of my code.

Using the current (02/2020) Version of Angular, MongoDB and Chrome

Topic class:

export class Topic {
    constructor(
        public title: string,
        public solutionID: number[] = [],
        private rating: number = 0,
        private votes: number = 0
    ) { }

    currentRating(): number {
        return this.rating / this.votes;
    }

    vote(stars: number) {
        this.votes++;
        this.rating += stars;
    }


    lastEditDate(): Date {
        console.log('test');
        return this.ts_worker[this.ts_worker.length - 1];
    }
} 

main-view.component.html This is the "frame" where the list is shown

<div class="content-wrapper">
    <app-topic-view *ngFor="let tp of topics" [topic]="tp"></app-topic-view>
</div>

main-view.component.ts This is where my topics come from (GET from Server)

import { Component, OnInit, Input } from '@angular/core';
import { TopicsService } from 'src/app/services/topics.service';
import { Topic } from 'src/app/classes/class_Topic';

@Component({
  selector: 'app-main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.scss']
})

export class MainViewComponent implements OnInit {

  @Input() topics: Topic[];

  constructor(private topicService: TopicsService) { }

  ngOnInit() {
    this.topicService.getAllTopics().subscribe((topics: Topic[]) => {
      this.topics = topics;
    })
  }

}

topic-view.component.html

<div class="topicElement">
    <!-- Some code hidden here -->
    <div class="back-group">
        <div class="solutionCount">Solutions: {{(topic.ts_worker[topic.ts_worker.length - 1])}}</div>
        <div class="solutionCount">Solutions: {{(topic.lastEditDate())}}</div>
    </div>
</div>

The error is found in {{(topic.lastEditDate()}} .

The line above that works just fine. Only the function call doesn't work.

Error

Goal

---

What am I missing here

In the end I would like to use the functions of my class. I'm used to do this in other languages. Is this possible in Angular?

EDIT: Typo fixed

Answer 1

your "topics" are not class Topic when return of the http because when it's traspile to javaScript, you only has an object, you need create as

 this.topicService.getAllTopics().subscribe((topics: Topic[]) => {
      this.topics=x.map(x=>new Topic(x.title,x.solutionID,x.rating,x.votes))
    })

Others idea is that Topic was

export class Topic {
  public title;
  public solutionID;
  private rating;
  private votes;
  constructor({ title, solutionID, rating, votes }) {
    this.title = title;
    this.solutionID = solutionID;
    this.rating = rating;
    this.votes = votes;
  }
  ..your methods...
}

And write

this.topicService.getAllTopics().subscribe((topics: Topic[]) => {
      this.topics=x.map(x=>new Topic(x))
    })

And another idea are that in your app-topic-view you has

private _topic:Topic
@Input() set topic(value)
{
  this._topic=new Topic(value.title,value.solutionID,value.rating,value.votes)
  //or if you change the constructor
  // this._topic=new Topic(value);
}

get topic()
{
     return this._topic;
}