使用 *ngFor 自定义模板渲染

Question

我有一个 History 组件，其中包含一个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)
   {}
}

如果我渲染它，什么都没有出现。我已经使用 a<li>来显示 id 和描述，它的工作原理与预期一致。但是当然HistoryEntry它本身可能会变得非常复杂并且需要它自己的逻辑等等。所以必须有一种方法可以<historyentry>按照模板给出的方式进行渲染，不是吗？

在 WPF 中，我会说HistoryEntry是一个UserControl带有它自己的ViewModel附件。

Answer 1

@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>