angular - 使用* ngFor的自定义模板渲染

我有一个历史记录组件，其中包含一个HistoryEntries数组。
HistoryComponent看起来像:

 @Component({
 selector: 'history',
 template: `
    <div>
       <historyEntry *ngFor='let entry of historyentries'></historyEntry>
    </div> `,
    directives : [HistoryEntryComponent]
 })

HistoryComponent类看起来像:

export class HistoryComponent{
   public historyentries = [
                    new HistoryEntryComponent(1, "lalala"),
                    new HistoryEntryComponent(2, "xxxxx")
                    ];
}

然后，我有一个HistoryEntryComponent:

@Component({
  selector: 'historyentry',
  template: `
    <div>
        <h1>ID: {{Id}} , Descr.: {{Description}}</h1>
    </div>
`
})

和一个类:

export class HistoryEntryComponent {
   constructor(public Id : Number, public Description : string)
   {}
}

如果我将其渲染，则什么都不会显示。我已经使用了<li>来显示ID和描述，其工作方式与预期的一样。但是，当然HistoryEntry本身可能会变得非常复杂，并且需要自己的逻辑等。因此，必须有一种方法可以渲染模板给出的<historyentry>，不是吗？

在WPF中，我会说HistoryEntry是附加了自己的UserControl的ViewModel。

最佳答案

@Component({
 selector: 'history',
 template: `
    <div>
       <historyentry *ngFor='let entry of historyentries' [entry]="entry"></historyentry>
    </div> `,
    directives : [HistoryEntryComponent]
})

export class HistoryEntryComponent {
   @Input() entry:HistoryEntry; // or whatever type `entry` is
   constructor()
   {}
}

<h1>ID: {{entry?.Id}} , Descr.: {{entry?.Description}}</h1>