angular - *ngFor を使用したカスタム テンプレート レンダリング

Question

の配列を保持する履歴コンポーネントがあります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 と説明を表示するために既に a を使用しましたが、これは期待どおりに機能します。しかしもちろん、HistoryEntryそれ自体が非常に複雑になり、独自のロジックなどが必要になる可能性があります。したがって<historyentry>、テンプレートで指定されたとおりにレンダリングする方法が必要ですよね?

WPFでは、それ自体が添付されてHistoryEntryいると言えます。UserControlViewModel