Angular 2+ ngFor 中的 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 的键"