Angular — зацикливание проблемы с ng-контейнером

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


angular ng-template ng-container angular5
person AngularM    schedule 28.11.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы используете 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>
person cyr_x    schedule 28.11.2017
comment
Потрясающе, спасибо! Если вам интересно, если вы используете индекс в цикле *ngFor, вы можете передать индекс таким же образом: <li *ngFor="let fruit of fruitlist, let i=index"> <ng-container *ngTemplateOutlet="fruitAccordion; context: { $implicit: fruit, $implicit: i }"></ng-container> <ng-template #fruitAccordion let-fruit let-i></ng-template> - person G-Unit; 20.07.2021
comment
Вы не можете передать один и тот же ключ более одного раза в контекст, вам нужно назначить его другому ключу, например: context: { $implicit: fruit, myIndex: i } и let-i="myIndex" - person cyr_x; 20.07.2021
comment
Ай! вроде работает, но ты прав - person G-Unit; 20.07.2021