Ссылочная переменная динамического шаблона внутри ngFor (Angular 9)

Как объявить динамическую ссылочную переменную шаблона внутри ngFor элемента?

Я хочу использовать компонент popover из ng-bootstrap, код всплывающего окна (с привязкой Html) выглядит следующим образом:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

Как я могу обернуть эти элементы внутрь ngFor?

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

Хммм ... есть идеи?


angular ng-bootstrap angular-template
person Boo Yan Jiong    schedule 08.06.2017    source источник
comment
Не существует такой вещи, как динамические ссылочные переменные. Как вы думаете, почему он должен быть динамичным?   -  person Günter Zöchbauer    schedule 08.06.2017
comment
потому что в их учебнике сказано, что для привязки html внутри всплывающего окна нам нужно создать ng-template и связать его с ссылочной переменной шаблона, но теперь я хочу использовать это всплывающее окно внутри элемента ngFor   -  person Boo Yan Jiong    schedule 08.06.2017
comment
Просто сделай то же самое. Переменная шаблона будет отличаться для каждого элемента, даже если у него одно и то же имя.   -  person Günter Zöchbauer    schedule 08.06.2017
comment
Что произойдет, если вы будете использовать один и тот же ref для всего? Вы это проверяли?   -  person developer033    schedule 08.06.2017
comment
Ха, я никогда не думаю об этом ... Я сейчас протестирую ... потому что я продолжаю думать о том, как объявить ** ссылочную переменную шаблона с индексом ** ... обновится позже после Тестирую ...: D   -  person Boo Yan Jiong    schedule 08.06.2017
comment
Да, работает ... Проверял ... спасибо за решение   -  person Boo Yan Jiong    schedule 13.08.2017

Ответы (4)


arrow_upward
124
arrow_downward

Ссылочные переменные шаблона привязаны к шаблону, в котором они определены. Структурная директива создает вложенный шаблон и, следовательно, вводит отдельную область.

Таким образом, вы можете просто использовать одну переменную для справки по шаблону

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

и он должен работать, потому что он уже объявлен внутри <ng-template ngFor

Пример Plunker

Подробнее см. Также:

person yurzui    schedule 08.06.2017
comment
Обратите внимание, что если вы используете @ViewChild, вы не можете использовать это решение (а затем следует использовать решение @ AlexBoisselle) - person Random; 03.08.2020

arrow_upward
24
arrow_downward

Это лучшее решение, которое я нашел: https://stackoverflow.com/a/40165639/3870815

В этом ответе они используют:

@ViewChildren('popContent') components:QueryList<CustomComponent>;

Чтобы создать список этих динамически генерируемых компонентов. Настоятельно рекомендую вам проверить это!

person Alex Boisselle    schedule 24.01.2019
comment
Лучший ответ! - person igg; 22.05.2020

arrow_upward
2
arrow_downward

Другой способ разрешить это - создать компонент, который обертывает кнопку и ng-template.

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

И в компоненте кнопки всплывающего окна есть следующее:

<ng-template #popContent>Hello, <b>{{member.name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>
person user14002866    schedule 27.07.2020

arrow_upward
-2
arrow_downward

Вы можете использовать trackBy: trackByFn в *ngFor

<div *ngFor="let member of members;trackBy: trackByF">
    <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>
person Babak irannezhad    schedule 02.03.2020