Angular - 使用 ng-container 循环问题答案

【问题标题】：Angular - issue looping with an ng-containerAngular - 使用 ng-container 循环问题
【发布时间】：2017-11-28 10:16:39
【问题描述】：

我想使用 ng-container 从 ngFor 中调用 ng-template

我的列表是一个数组并且有一个对象列表。对象的一个属性是标题 - 在 ng-template 中可以看到。

HTML：

<ul>

    <li *ngFor='let item of list;let i = index'>

        <ng-container *ngTemplateOutlet="itemTemplate;context:item"></ng-container>

    </li>

</ul>

<ng-template #itemTemplate let-item="item">
    <p>{{ item?.title }}</p>
</ng-template>

注意：问题是 let-item 似乎未定义或为空对象。这很奇怪，因为我把它传进去了。

【问题讨论】：

标签： angular angular5 ng-template ng-container

【解决方案1】：

您对templateOutletContext 的使用略有错误。

您可以使用$implicit 键作为上下文，然后将其绑定到您的模板，如下所示：

<ul>
  <li *ngFor="let item of list">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item }">
    </ng-container>
  </li>
</ul>
<ng-template #itemTemplate let-item>
    <p>{{ item?.title }}</p>
</ng-template>

或使用命名键：

<ul>
  <li *ngFor="let item of list">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }">
    </ng-container>
  </li>
</ul>
<ng-template #itemTemplate let-item="item">
    <p>{{ item?.title }}</p>
</ng-template>

【讨论】：

太棒了，谢谢！对于任何想知道的人，如果您在 *ngFor 循环中使用索引，您可以以相同的方式传递索引：<li *ngFor="let fruit of fruitlist, let i=index"> <ng-container *ngTemplateOutlet="fruitAccordion; context: { $implicit: fruit, $implicit: i }"></ng-container><ng-template #fruitAccordion let-fruit let-i></ng-template>
您不能将同一个键多次传递到上下文中，您需要将其分配给不同的键，例如：context: { $implicit: fruit, myIndex: i } 和 let-i="myIndex"
哎呀！看起来它正在工作，但你是对的

【解决方案2】：

首先你的元素必须在 *ngFor 的范围内。就像你想重复一个

标签内的标签。那么代码将是

<div *ngFor="item in items">
  <p>{{item}}</p>
</div>

同样在你的情况下必须在里面

标签

<ul>

    <li *ngFor='let item of list;let i = index'>

        <ng-container *ngTemplateOutlet="itemTemplate;context:item"></ng-container>
<ng-template #itemTemplate let-item="item">
    <p>{{ item?.title }}</p>
</ng-template>

    </li>

</ul>

【讨论】：

【解决方案3】：

<ul>
  <li *ngFor="let i of list">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { i: i }">
    </ng-container>
  </li>
</ul>
<ng-template #itemTemplate let-item="i">
    <p>{{ i?.title }}</p>
</ng-template>

【讨论】：