我开发了一个图片库。
我有一个带有图像和类别(猫)的对象和另一个只包含类别的对象。

在图库中,我想划分不同类别中的图像,为此,我将图像数组中的类别与只有类别的数组一起购买。

我的问题是数组被遍历,当条件为假时,有一个空格:( 我怎样才能删除这个空间并只显示这个类别中符合条件的所有图像?

有人能帮我吗?

DEMO

状况

*ngIf="product.Cat == cat"

html
<div *ngFor="let cat of Cats">
      <div class="row ">
            <span class="">{{cat}}</span>
      </div>
      <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
        <li class="mdc-image-list__item" *ngFor="let product of Images; let  j = index;">
          <div *ngIf="product.Cat == cat">
          <div class="mdc-image-list__image-aspect-container">
            <ng-container *ngIf="product.image == null; else productImage">
              <img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
            </ng-container>
            <ng-template #productImage>
              <img [src]="product.image" class="mdc-image-list__image">
            </ng-template>
          </div>
          </div>
        </li>
      </ul>
    </div>

angular - 画廊中的组图像-LMLPHP

如您所见,当图像不属于时,会创建一个白色的空间,这是我的问题,我不知道如何解决它:(

最佳答案

问题是无论您的图像是否属于该类别,您都将 li 添加到您的无序列表中,因此它占用了空间。将您的模板更改为以下内容:

<div *ngFor="let cat of Cats">
  <div class="row ">
    <span class="">{{cat}}</span>
  </div>
  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
    <ng-container *ngFor="let product of Images; let  j = index;">
      <!-- We only want a li if this product belongs to this category -->
      <li class="mdc-image-list__item" *ngIf="product.Cat == cat">
        <div class="mdc-image-list__image-aspect-container">
          <ng-container *ngIf="product.image == null; else productImage">
            <img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
          </ng-container>
          <ng-template #productImage>
            <img [src]="product.image" class="mdc-image-list__image">
          </ng-template>
        </div>
      </li>
    </ng-container>
  </ul>
</div>

Here's a working example

关于angular - 画廊中的组图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59778422/

10-12 12:53
查看更多