ngFor内的Angular 2+ NgTemplateOutlet

Question

我们有一些数组，例如：

• heroes: Hero[];
• villains: Villain[];
• ...
• puppies: Puppy[]

还有一个类似的模板

<p *ngFor="let individual of heroes">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>
    <p *ngFor="let individual of villains">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>
...
 <p *ngFor="let individual of puppies">
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
</p>

*ngFor 循环具有所有相同的内容。为简化起见，我们创建了一个 ng-template 以供我们重复使用。

<ng-template let-individual #individualParagraphContent>
    {{ individual.name }} - {{ individual.mobileNumber }}
    ...
<ng-template>

现在我们想像这样使用它：

<p *ngFor="let individual of puppies">
  <ng-content *ngTemplateOutlet="individualParagraphContent;
              context: {individual: individual}">
  </ng-content>
</p>

在这里我失败了。我发现了整个 *ngFor 循环在模板中的示例，以及如何从组件本身传递值，但我没有设法将 <ng-template> 插入 for 循环并正确传递变量（个人）。

编辑 解决了。一切都很好，但 ng-template 中的初始化

<ng-template let-individual="individual" #individualParagraphContent>

Answer 1

试试这样的：

<ng-container
    *ngFor="let individual of heroes"
    [ngTemplateOutlet]="individualParagraphContent"
    [ngTemplateOutletContext]="{individual: individual}"></ng-container>

对于模板：

<ng-template let-individual="individual" #individualParagraphContent>
    <p>
       {{ individual.name }} - {{ individual.mobileNumber }}
       ...
    </p>
<ng-template>

let-(x)="上下文中 x 的键"