Angular 2+中ngFor内使用NgTemplateOutlet

Question

Angular 2+中ngFor内使用NgTemplateOutlet

angularangular2-templatengforng-templateangular2-ngcontent

10

我们有一些数组，例如：

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循环中并正确传递变量（individual）。

编辑已解决。一切都没问题，但是ng-template中的初始化有问题。

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

- sevic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julien METRAL · Accepted Answer

尝试这样做：

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

在上下文中，使用“key”作为“x”的变量名。