Реализовать два условия в представлении данных

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 и получил желаемый результат - показывать каждый Cat, если массив Cats пуст. Возможно, вам нужно настроить checkCatsArray() по своему усмотрению, но я считаю, что это то, что вы ищете.

Надеюсь, это поможет!