angular - 画廊中的团体形象

Question

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

在图库中，我想将图像划分为不同类别，为此，我将图像数组中的类别与仅包含类别的数组一起购买。

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

有人可以帮助我吗？

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>

正如你所看到的，当图像不属于时，会出现一个白色的空间，这是我的问题，我不知道如何解决它:(

Answer 1

问题是，无论您的图像是否属于该类别，您都会将 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 .