代码之家 › 专栏 › 技术社区 › AngularM

使用ng容器的角度问题循环

ng-container ng-template angular5 angular

2

AngularM · 技术社区 · 8 年前

我想从NGF中调用ng模板以使用ng容器

我的列表是一个数组,有一个对象列表。对象的一个属性是标题,可以在ng模板中看到。

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项似乎未定义或为空对象。这很奇怪,因为我把它传了进来。

3 回复 | 直到 8 年前

1

5

cyr_x 8 年前

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

2

0

gaurav bankoti 8 年前

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

0

Vignesh 8 年前

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