Angular-使用ng容器进行问题循环

Question

我想使用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似乎未定义或为空对象。 自从我传入后，这很奇怪。

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

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

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