Question

项目：尝试创建一个简单的图库。一个主要的图像占位符，它将其图像更改为与已单击的相应缩略图图像具有相同的src。

普通JS中的示例： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tab_img_gallery

代码：

<div *ngIf="images">  

  <div *ngFor="let image of images"> //images array

    <img #productThumbnail [src]='image.fields.file.url' 
    (click)='thumbnailClicked()'>

    <div *ngIf='showImage'>//simple function that shows the image
      <img src={{productThumbnail.src}}>
    </div>

（image.fields.file.url是图片网址的外部数组（数组名称：图片））

问题：当填充图像数组时，许多数组项将被赋予参考#productThumbnail

这会导致主图像占位符检索每个缩略图的src，因为它们都具有相同的#productThumbnail引用。我只需要点击的缩略图。

我希望这有一定道理。任何帮助都非常感谢。

Answer 1

模仿，我认为你想要这个：

<img *ngFor="let image of images" 
    [src]='image.fields.file.url' 
    (click)='thumbnailClicked(image)'>

您是否已逐步完成了Angular tutorial？我认为通过这个可以帮助你解决这样的问题。

Angular 2：如何在数组中定位元素的HTML属性

1 个答案: