顯示特定於從顯示的圖像列表中點擊圖像的內容的彈出框

我正在爲我的項目使用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

顯示特定於從顯示的圖像列表中點擊圖像的內容的彈出框

回答

相關問題