Angular-与ng -container一起循环

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>

同样，在您的情况下，必须在

tag 内

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