Angular - выдача цикла с помощью ng-контейнера

Question

Я хочу вызвать ng-шаблон из ngFor, используя 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 не определен или является пустым объектом. что странно, так как я передаю его.

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>