angular - 使用 *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>

Answer 2

您需要提供 id 和 description 作为 historyend 组件的输入

<historyEntry *ngFor='let entry of historyentries' [id]="entry.id" [description]="entry.description"></historyEntry>

export class HistoryEntryComponent {
   @Input id:number;
   @Inpur description:string;
   constructor(public Id : Number, public Description : string)
   {}
}