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

Question

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

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

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

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

问题是我还需要按类别对项目进行排序，每个类别都有一个标题。

我现在有 2 个循环，一个用于 sortedByCategory 数组中的每个类别，一个用于一个类别中的每个项目。

问题是，如果我过滤的结果是空的，类别名称还在。

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

Answer 1

我已经很久没有使用 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>