Блог

У меня есть два массива в моем приложении Angular, один из которых представляет собой массив объектов с категориями, а другой массив с элементами, в котором есть свойство object, в котором указано, к какой категории принадлежит элемент.

Итак, я создал несколько пользовательских каналов, один из которых возвращает все элементы, если выбрана категория «все», и два других канала для массива элементов, которые возвращают отфильтрованные элементы для каждой категории и другой канал для поиска.

Элементы отображаются с именем категории, когда выбрано «все», но когда я ищу элемент, я бы скрыл метку категории, если в ней нет элементов.

Как я могу ее архивировать?

Вот мое *ngFor место, где я рендерю материал:

 <div
   *ngFor="
   let cat of category
   | menuFiltered
   : (selected === -1 ? -1 : category[selected].id)
   "
   class="products"
   >
   <h2>{{ category.desc }}</h2> // i need to hide this if the below plus array in search is empty
   <hr />
   <div
      *ngFor="
      let plu of plus
      | pluFiltered: men.id
      | pluSearch: searchModel
      "
      class="row mb-3 product"
      >
      ...
   </div>
</div>
  

Редактировать:
Массивы выглядят так:

 menu = [{id: 123, codmen: 2, desc: "ANTIPASTI", estesa: ""}, {id: 127, codmen: 5, desc: "PRIMI", estesa: ""}, {id: 128, codmen: 6, desc: "SECONDI", estesa: ""}] // this is the "category"

plus = [{desc: "SFOGLIATINA AL CARTOCCIO", menu: 123}, {desc: "SFOGLIATINA AL CARTOCCIO", menu: 127}, {desc: "SFOGLIATINA AL CARTOCCIO", menu: 128}] // menu is the actualy id of menu array to which item belong
  

Как только я получаю элементы из своего API, я удаляю из массива меню все объекты, в которых нет ни одного элемента, вот так:

 this.menu = this.menu.filter((menu) =>
  this.plus.some((item) => item.menu === menu.id)
);
  

И вот мои каналы:

menuFiltered труба:

 export class MenuFilteredPipe implements PipeTransform {

  transform(list: any[], menu: number): any {
    return list ? menu === -1 ? list : list.filter(item => item.id === menu) : [];
  }

}
  

pluFiltered труба:

 export class PluFilteredPipe implements PipeTransform {

  transform(list: any[], menu: number): any {
    return list ? list.filter(item => item.menu === menu) : [];
  }
}
  

И pluSearch труба:

 export class PluSearchPipe implements PipeTransform {

  transform(list: any[], filterText: string): any {

    return list ? list.filter(item => item.desc.search(new RegExp(filterText, 'i')) > -1) : [];

  }

}
  

Попробуйте использовать ng-контейнер с *ngIf:

 <div
 *ngFor="let cat of category| menuFiltered: (selected === -1 ? -1 : category[selected].id)" class="products">
  <ng-container *ngIf="plus | pluFiltered: men.id | pluSearch: searchModel as plusArray">
    <h2 *ngIf="plusArray.length > 0">{{ category.desc }}</h2>
     <div *ngFor="let plu of plusArray" class="row mb-3 product">
       ...
     </div>
  </ng-container>
</div>