angular - 通过搜索过滤 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>