angular - 通过搜索过滤 ng-for 中的项目并为有结果的项目显示类别
问题描述
我创建了一个应用程序来显示 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 循环在过滤器之后有元素时才出现类别名称?嵌套循环和过滤器的想法是必要的,还是可以以更高效的方式制作?
解决方案
我已经很长时间没有使用 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>
推荐阅读
- reactjs - 如何在 Next.js 组件中导入 Sass 模块
- powershell - 循环访问 REST 端点以读取文档并写入 Azure Blob 存储
- python - 如何使用 macOS 上的 Speech_recognition 模块修复“OSError:[Errno -9986] 内部 PortAudio 错误”?
- java - 创建多个 Jenkins 视图
- javascript - Gulp-错误:找不到模块“gulp-watch”
- css - 在 ReactJS 中悬停时如何在特定图像上添加样式?
- javascript - Javascript等待不等待?
- node.js - 不能向 MongoDB 集合添加超过 1 个对象
- c++ - 如何在 constexpr 中使用 boost 单位前缀
- javascript - Typescript + Next.js 不是类型检查函数参数/参数