Angular

Question

我想使用 ng-container

从 ngFor 中调用 ng-template

我的列表是一个数组，有一个 object 的列表。 object 中的一个属性是标题 - 在 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 似乎未定义或为空 object。这很奇怪，因为我传递了它。

Answer 1

首先你的元素必须在 *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 2

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

Angular - 使用 ng-container 循环问题

Angular - issue looping with an ng-container

angular5

ng-template

ng-container