javascript - 运行 ngFor 时组件内的类函数给出错误(不是函数)

Question

我正在尝试显示一个主题列表，其中每个列表条目都是自定义组件。 我将用我的代码的简单示例来描述我的问题。

使用当前 (02/2020) 版本的 Angular、MongoDB 和 Chrome

主题类别:

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];
    }
} 

ma​​in-view.component.html 这是显示列表的“框架”

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

ma​​in-view.component.ts 这是我的主题的来源(从服务器获取)

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>

错误出现在{{(topic.lastEditDate()}}中。

上面的行工作得很好。只有函数调用不起作用。

错误

目标

---

我在这里缺少什么

最后我想使用我的类的功能。我习惯用其他语言这样做。 这在 Angular 中可能吗？

编辑:已修复拼写错误

Answer 1

当http返回时，你的“主题”不是类Topic，因为当它转换为javaScript时，你只有一个对象，你需要创建为

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

其他人的想法是主题是

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...
}

并写

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

另一个想法是，在您的应用程序主题 View 中，您有

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;
}