@ ngx-gallery |角度8

时间:2019-10-15 22:41:57

标签: angular image-gallery

如何打开每个元素的大图片?我现在有普通的div,其中每个元素在预览中都有图像。但是当我打开大视野时,我总是会从最后一个项目获得图像。

enter image description here

当我单击图像时,我的组件将始终打开最后一个图像(在此处为“死侍”)

我尝试过这种方式。寻找<p onClick="test()" class="container" gallerize>

<div *ngFor="let item of postsGroup; let i = index" [attr.data-index]="i" style="margin-top: 15px;" class="card col-md-8 p-0">
<div class="card-header">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="avatar-post">
  {{item.postTitle}}
</div>
<div class="card-body row">
  <div class="col-md-12">
    <p class="card-text">
      {{item.postBody}}
    </p>
    <div *ngIf="item.photos.length > 0" class="row">
      <p class="container" gallerize>
        <img style="padding:1px; height: 70px; width: auto;" class="col-md-3"  
             *ngFor="let img of postPhotos[i]" [src]="img.srcUrl">
      </p>
    </div>
    </div>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

postPhotos中有来自typeCode的帖子照片

suc => {
    this.postsGroup = suc;
    console.log(suc);
    for (let index = 0; index < this.postsGroup.length; index++) {
        this.postPhotos.push(suc[index].photos);
    }
},

我尝试过这种方式

<p onClick="test()" class="container" gallerize>
  <img style="padding:1px; height: 70px; width: auto;" class="col-md-3"
       *ngFor="let img of item.photos" [src]="img.srcUrl">
</p>

结果相同。大视图中的最后图像http://prntscr.com/pjsusb  有什么想法吗?

0 个答案:

没有答案