Как создать несколько экземпляров ngbPopover с настраиваемыми шаблонами

Question

Я пытаюсь использовать компонент ngbPopover библиотеки ng-bootstrap, чтобы создать popper параметров подменю верхнего навигационного меню. Я собирался использовать возможность настраивать для каждого параметра меню. Параметры меню генерируются динамически с помощью директивы * ngFor. Я не мог найти способ использовать шаблон для каждого элемента * ngFor. Не уверен, что я скучаю, кажется, довольно простое требование. Вот то, что я пытаюсь сделать:

<li class="nav-item" *ngFor="let option of topMenuOptions; let i = index;"> 
     <a routerLinkActive="active" [routerLink]="[option.permalink, option.id]" class="nav-link" [ngClass]="{'nav-link-hovered': isHovered(option.name)}" 
      (mouseover)="onHoverOverLink(option.name, true, i)" (mouseout)="onHoverOverLink(option.name, false, i)" [ngbPopover]="'subMenues' + i" 
      placement="bottom" triggers="manual">{{option.name}}</a> 
      <template [attr.id]="'subMenues' + i"> 
      some submenues {{i}} 
      </template> 
    </li> 

Это не выглядит, как можно генерировать ссылки шаблона динамически с помощью такого рода синтаксис [ngbPopover] = «+„subMenues“я»

Это то, что я пытаюсь достичь с тем исключением, что каждый поповер должен иметь свой собственный

Answer 1

<li class="nav-item" *ngFor="let option of topMenuOptions; let i = index"> 
    <template #submenus> 
     some submenues {{i}} 
    </template> 
    <!-- assuming "option.name" is a string --> 
    <a href="#" popoverTitle="{{option.name}}" [ngbPopover]="submenus" 
     placement="bottom" triggers="mouseenter:mouseleave">menu nr. {{i}} 
    </a> 
</li> 

Это сработало для меня. Я надеюсь, что это поможет.