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

ngFor内的Angular 2+ NgTemplateOutlet

1 个答案: