通过搜索过滤ng-for中的项目，并显示具有结果的项目的类别

问题描述

我创建了一个应用程序来显示JSON中的元素。 我有1500多个项目，分布在一个大数组中，还有一个包含按类别排序的项目的数组。

const fullDataSet = [{name: 'Foo',category: 'vegetable'},{name: 'Bar',category: 'fruit'}];

const = sortedByCategory = [
[{name: 'Foo',{name: 'FooBis',category: 'vegetable'}],[{name: 'Bar',category: 'fruit'},{name: 'Baz',category: 'fruit'}]
];

我实现了一个过滤器，该过滤器可以在* ngFor上运行的每个项目中按属性进行搜索。

问题是我还需要按类别对项目进行排序，并为每个类别添加标题。

我现在有2个循环，sortedByCategory数组中每个类别都有一个循环，而类别中每个项目都有一个嵌套循环。

问题是，如果我过滤的结果为空，则类别名称仍然存在。

如何构造代码，以使类别名称仅在嵌套的ngFor循环在过滤器之后包含元素时出现？ 嵌套循环和过滤器的想法是必要的还是可以以更高效的方式实现？

解决方法

我已经很长时间没有使用Angular了，但是这是我的主意，语法可能很混乱：D

<div *ngFor="let item of categories">
     <Category *ngIf="item.length>0" data={{item}}/>
</div>

在“类别”组件中：

<div *ngFor="let item of items">
     <p>{{item.name}}</p>
</div>