角2+ NgTemplateOutlet内ngFor

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键”