Question

我正在处理正在显示图像的图像网格功能。我正面临着创建可扩展/可折叠div的问题。

HTML

t2

.ts文件

<div *ngIf="Display('images')">
   <section class="image-grid" *ngFor="let item of items$|async">
      <div class="image__cell is-collapsed">
         <div class="image--basic">
            <img (click)="expandImage()" class="basic__img" src="{{item.link}}">
         </div>
         <div class="image--expand" [ngClass]="{'image--expand': !_expand}">
            <a class="expand__close"></a>
            <img class="image--large" src="{{item.link}}">
         </div>
      </div>
   </section>
 </div>

CSS

private _maxHeight: string;
private _marginBottom: string;
private _expand: boolean = false;

expandImage() {
  this._expand = !this._expand;
  this._maxHeight = '500px';
  this._marginBottom = '10px';
}

上面的代码创建了一个可扩展的div。但问题是，每当我点击任何一个图像时，div就会在每一行中展开。我尝试创建类似于此的内容：Recreating image-viewer。如果有人可以帮助我，那将是很棒的。谢谢。 :)

Answer 1

我猜这里，

将点击密钥传递给此功能(click)="expandImage(item.$key)" 并在您的代码中

expandImage(key) {
this._expand = !this._expand;
this.clickedItem = key;
this._maxHeight = '500px';
this._marginBottom = '10px';
}

并在您的模板中

<div class="image--expand" *ngIf="clickedItem == item.$key" [ngClass]="{'image--expand': !_expand}">
     <a class="expand__close"></a>
     <img class="image--large" src="{{item.link}}">
</div>

如何创建更好的可扩展/折叠div？

1 个答案: