angular - 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循环在模板中以及如何从组件本身传递值的示例，但我没有设法将 a<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 的键"