Angular 2+ NgTemplateOutlet inside 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 的键">