主页 / 问题 / 1044361
Accepted
FX_Sektor
Asked:2020-11-10 07:32:25 +0000 UTC2020-11-10 07:32:25 +0000 UTC

在 html 中循环后总是在画廊的最后一篇文章中 | 角 8 | @ngx-画廊/核心

  • 772

页面加载时，有一个从数据库成功加载的帖子列表。每个帖子都有自己的一组照片。我为画廊使用@ngx-gallery/core lib。实际上，在每篇文章中，都在一个循环中插入了一个用于图库的组件。在查看提要中的所有帖子时，一切都在它的位置。但只要我点击图片，就会打开一个视图，其中总是有上一篇文章的图片。

这是html代码

<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 id="{{i"  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>
    </div>
    </div>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

我的变量中的帖子被明确记录。

suc => {
    this.postsGroup = suc;
    this.ngxLoader.stop('group');
  },
  err => {
    this.ngxLoader.stop('group');
  });

我已经尝试了 300 多个选项。我在代码中创建了一个单独的数组，它仍然以完整模式将上一篇文章中的照片加载到视图中。 在此处输入图像描述

我从上一篇文章中得到了画廊。我究竟做错了什么？ 在此处输入图像描述

html

1 个回答

  1. Best Answer

    在重新阅读文档并用铃鼓跳舞后找到了解决方案。结果，我得到了一个完美无瑕的完整解决方案。回答我自己的问题，也许它会对某人有所帮助。

    1. 在帖子本身中，我们简单地循环绘制图像并删除gallerize 属性，如下所示：

    <div *ngIf="item.photos.length > 0" class="row">
          <p class="container">
            <img (click)="open(i,t)" [attr.data-index]="i" style="padding:1px; height: 70px; width: auto;"
              class="col-md-3" *ngFor="let img of item.photos; let t = index" [src]="img.srcUrl">
          </p>
        </div>

    我们通过单击在其上挂起一个事件。这是打开事件本身的代码

     async mappingImg(index): Promise<GalleryItem[]> {
    return this.postsGroup[index].photos.map(item => new ImageItem({ src: item.srcUrl, thumb: item.previewUrl }));
  }

  async open(index, indexPhoto) {
    this.itemsImg = [];
    this.itemsImg = await this.mappingImg(index);
    this.lightboxRef.load(this.itemsImg);
    this.showPhoto = true;
    this.lightbox.open(indexPhoto);
  }

    我们的具有gallerize 属性的画廊现在是zaharkodin，位于页面底部。是她将开放观看。是的，它完全是空的，因为我们将在 ngOnInit 中设置整个配置

    <p *ngIf="showPhoto" gallerize>
  <img >
</p>

    最重要的是 ngOninit() 中的配置

     this.lightboxRef = this.gallery.ref('lightbox');
    this.lightboxRef.setConfig({
      imageSize: ImageSize.Contain,
      loadingMode: 'indeterminate',
      thumbPosition: ThumbnailsPosition.Bottom
    });
    this.lightbox.setConfig({
      panelClass: 'fullscreen',
    });
    this.lightbox.closed.subscribe(event => this.close(event));

    如您所见，我们正在订阅“关闭”视图事件。这是关闭（事件）方法

    close(event) {
    this.itemsImg = [];
    this.showPhoto = false;
  }

    隐藏并清理图库，否则页面下方会有一张大纸）

    好吧，我们不要忘记类开头的变量和必要的导入

    import { Lightbox } from '@ngx-gallery/lightbox';
import { Gallery, GalleryItem, ImageItem, ThumbnailsPosition, ImageSize, GalleryRef } from '@ngx-gallery/core';

export class GroupComponent implements OnInit {
  lightboxRef: GalleryRef;
  itemsImg: GalleryItem[];
  showPhoto = false;

    在构造函数中

    public gallery: Gallery, public lightbox: Lightbox,

    • 0

相关问题