我开发了一个图片库。
我有一个带有图像和类别(猫)的对象和另一个只包含类别的对象。
在图库中,我想划分不同类别中的图像,为此,我将图像数组中的类别与只有类别的数组一起购买。
我的问题是数组被遍历,当条件为假时,有一个空格:( 我怎样才能删除这个空间并只显示这个类别中符合条件的所有图像?
有人能帮我吗?
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>
如您所见,当图像不属于时,会创建一个白色的空间,这是我的问题,我不知道如何解决它:(
最佳答案
问题是无论您的图像是否属于该类别,您都将 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/