显示特定于从显示的图像列表中点击图像的内容的弹出框

我正在为我的项目使用Angular 2。我遇到库：http://valor-software.com/ngx-bootstrap/#/popover点击一个项目时显示弹出窗口。基本上我使用ngFor循环在页面上显示了几个图像，如下所示：显示特定于从显示的图像列表中点击图像的内容的弹出框

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

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

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

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

来源

2017-09-03 user1892775

根据文档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>

和Controller：

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

，做的方法getItemTitle(item)

来源

2017-09-03 03:56:54 JoxieMedina

JoxieMedina一样的，一个问题是，项目没有表示内容的属性，我无法更改该对象/接口来添加内容。有些内容需要针对该项目创建并显示在弹出窗口中。你知道我怎么能显示这样的内容，如果它不是一个直接属性的项目？ – user1892775

@ user1892775我修改了我的答案，检查出来 – JoxieMedina

JoxieMedina，我曾尝试过这种方法，并在此方法的控制器中打印了一个console.log。它似乎被称为页面加载的无尽次数。而且，当我点击一张图片（14张图片）时，它会为所有14张图片调用该方法，并为每张图片调用两次。不知道为什么 – user1892775

显示特定于从显示的图像列表中点击图像的内容的弹出框

回答

相关问题