2

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

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

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

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

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

4

1 回答 1

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)

于 2017-09-03T03:56:54.197 回答