使用 *ngFor 自定义模板渲染

Question

我有一个历史组件，其中包含 HistoryEntries.

的数组

HistoryComponent 看起来像：

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

HistoryComponent-class 看起来像：

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>
`
})

和一个class:

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

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

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

Answer 1

您需要提供 id 和描述作为 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)
   {}
}

Answer 2

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

使用 *ngFor 自定义模板渲染

Custom template rendering with *ngFor

ngfor

angular