Question

我的Angular App中有两个数组，一个是带有类别的对象的数组，另一个是带有项目的数组，其中的项目具有对象属性，该属性说明该项目属于哪个类别。

因此，我制作了一些自定义管道，如果选择了类别“ all”，则其中一个返回所有项目，另外两个管道为items数组返回每个类别的已过滤项目，另一个管道进行搜索。

在项目呈现与类别名称时，“所有”被选中，但是当我在寻找一个项目，我会隐藏类别标签，如果没有项目它吧。

我如何归档？

这是我在{"product":{"title":"Premium LCD Digital Multimeter","body_html":"Premium LCD Digital Multimeter New Digital Multimeter is an electronic measuring instrument that combines all your most commonly used measurement functions into one unit. This Multimeter comes with measurement and testing functions for voltage, current, resistance, continuity (the connection between two points), testing diodes, and temperature This Digital Multimeter is a must have testing tool for your toolbox, shed, garage, car trunk, etc. Its portability enables you to be able to take it with you wherever you go and provides you with a multitude of features that helps you achieve the best results every time Features: * LCD Display * Auto power off * Digital Multimeter * Handheld Multimeter * Great tool bag accessory * Great hardware hacking and reverse engineering * Portable and versatile, easy to carry around and fits neatly in your tool bag * Multiple testing functions, diode testing, AC/DC testing, temperature, continuity * Perfect for home DIY en","product_type":"","vendor":"Abdur Rehman","tags":"blue,green,red","options":[],"images":[ { "src": "https://business.tradingzon.com/images/itemimages/15Json Turneryg1 (261).jpg" }, { "src": "https://business.tradingzon.com/images/itemimages/15Json Turneryg2 (159).jpg" }, { "src": "https://business.tradingzon.com/images/itemimages/15Json Turneryg3 (143).jpg" } ],"variants":[ { "title": "Default Title", "barcode": "dsfsr4353", "inventory_quantity": 1, "option1": "Default Title", "price": 10.69, "weight": 0.4, "weight_unit": "kg", "sku": "JSN-YG-02-090", "grams": 400, "tracked": "true", "compare_at_price": 15.45, "inventory_policy": "continue" } ]}}上渲染内容的地方：

*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>

一旦我从API中获得了项目，我就从菜单数组中删除了其中没有任何项目的所有对象，像这样：

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

这是我的烟斗：

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

Answer 1

尝试使用带有* ngIf的ng-container：

<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>

没有类别时如何隐藏类别？

1 个答案: