在数据呈现中实现两个条件

Question

我创建了一个图片库。这个画廊可能有也可能没有几种类型`(A, B ...)。

为了呈现我缺少以下数组的类型：Cats = ["A", "B"]。

图片只有在这个数组被填满时才会出现，即大小不同于0或undefined。

通常，当 Cat 数组的大小为 0 或 undefined 时，如何显示图像？

当cat数组具备这些条件时，图片正常显示，当数组不等于undefined或大于0时，会呈现如图所示的按类型分隔的图片。

有没有办法在不创建两个“html”的情况下实现这一点？有人可以帮我吗？

<div style="margin-left: 16px; margin-right: 16px;" class="first" *ngIf="Cats != undefined">
    <div *ngFor="let cat of Cats">
        <div *ngIf="counts[cat]">
            <div class="row">
                <span class="nomeCategoria">{{cat}}</span>
            </div>
            <ul class="mdc-image-list my-image-list">
                <ng-container *ngFor="let it of items">
                    <li class="mdc-image-list__item" *ngIf="it.Cat == cat">
                        <div class="mdc-image-list__image-aspect-container">
                            <ng-container *ngIf="it.image == null; else itImage">
                                <img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
                            </ng-container>
                            <ng-template #itImage>
                                <img [src]="it.image" class="mdc-image-list__image">
                            </ng-template>
                        </div>
                    </li>
                </ng-container>
            </ul>
        </div>
    </div>
</div>

Answer 1

我将检查 Cats 数组是否为空，如果是，我将使用所有项 Cat 填充一个数组。像这样的：

export class AppComponent  {

ngOnInit(){
  this.checkCatsArray()
}

Cats=[]

items=[
  {
    ID:1,
    Cat:"A",
   image:"https://material-components-web.appspot.com/images/photos/2x3/3.jpg",
},
  {
    ID:2,
    Cat:"B",
   image:"https://material-components-web.appspot.com/images/photos/3x2/10.jpg",
},
  {
    ID:3,
    Cat:"M",
   image:"https://material-components-web.appspot.com/images/photos/2x3/6.jpg",

},
]

get counts() {
    return this.items.reduce((obj, value) => {
      if (value.Cat in obj) {
        obj[value.Cat]++;
      } else {
        obj[value.Cat] = 1;
      }

      return obj;
    }, {});
  }

checkCatsArray() {
  if (this.Cats.length == 0) {
    for (let cat of this.items) {
      this.Cats.push(cat.Cat)
    }
  }
}
}

在这种情况下，我没有接触 HTML，我得到了想要的结果 - 如果 Cats 数组为空，则显示每个 Cat。也许您需要自己配置checkCatsArray()，但我相信这是您正在寻找的东西。

希望这会有所帮助！