显示弹出窗口，其中包含特定于从显示的图像列表中单击的图像的内容

Question

我正在为我的项目使用 Angular 2。 我遇到了 library: http://valor-software.com/ngx-bootstrap/#/popover 以在单击某个项目时显示弹出窗口。基本上我使用 ngFor 循环在页面上显示了几个图像，如下所示：

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

其中 items 是从控制器返回的数组 class。

现在，对于上面显示的每个图像，当我悬停时，我想显示一个弹出框，相应弹出框上显示的内容取决于上面的项目对象中存储的各种值。我如何实现这一目标？弹出内容需要非常特定于 'item' 对象，该对象用于单击的特定图像。

上面 link 中的示例似乎没有提供有关如何根据从项目列表中单击的特定项目在弹出窗口中显示数据的信息。

Answer 1

根据文档 http://valor-software.com/ngx-bootstrap/#/popover#dynamic-content 这应该有效：

 <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)

做同样的事情