Отображение всплывающего окна с содержимым, характерным для изображения, по которому щелкнул список отображаемых изображений

Question

Я использую Angular 2 для своего проекта. Я наткнулся на библиотеку: http://valor-software.com/ngx-bootstrap/ для отображения всплывающего окна при нажатии на элемент. По сути, у меня есть несколько изображений, отображаемых на странице с помощью цикла ngFor:

<span *ngFor="let item of items;">
    <img class="itemClass" [src]="item.image"                         
</span>

где items - массив, возвращаемый из класса контроллера.

Теперь для каждого изображения, отображаемого выше, при наведении курсора я хочу отобразить всплывающее окно, и содержимое, которое должно отображаться в соответствующем всплывающем окне, зависит от различных значений, сохраненных в объекте элемента выше. Как мне этого добиться? Содержимое всплывающего окна должно быть очень специфичным для объекта "item", который предназначен для конкретного изображения, по которому щелкают.

Примеры в приведенной выше ссылке, по-видимому, не дают информации о том, как отображать данные во всплывающем окне, основываясь на конкретном элементе, выбранном из списка элементов.

Answer 1

Согласно документации http://valor-software.com/ngx-bootstrap/ это должно работать:

 <span *ngFor="let item of items;">
  <img class="itemClass" [popover]="getItemContent(item)" [popoverTitle]="getItemTitle(item)" [src]="item.image"                         
</span>

И в контроллере:

getItemContent(item){return `The content is ${item.someProp} some other text`}

и сделать то же самое для метода getItemTitle(item)