仅当满足条件时，使用*ngFor迭代JSON的元素。
仅当满足条件时，使用*ngFor迭代JSON的元素。
我正在开发一个使用Angular 4的项目，通过服务调用JSON数据，一切工作都非常顺利，除了一个问题：我的JSON数据有以下简化的结构以便理解问题：
{
"animals": [
{
"name": "dog",
"subgroup": "vertebrate",
"class": "mammal"
},
{
"name": "pig",
"subgroup": "vertebrate",
"class": "mammal"
},
{
"name": "cat",
"subgroup": "vertebrate",
"class": "mammal"
},
{
"name": "snake",
"subgroup": "vertebrate",
"class": "reptile"
},
{
"name": "lizzard",
"subgroup": "vertebrate",
"class": "reptile"
},
{
"name": "crocodile",
"subgroup": "vertebrate",
"class": "reptile"
}
]
}
我想只迭代具有"class"为"reptile"的对象。我创建了以下结构：
{{reptiles.name}}
{{reptiles.class}}
但是问题是它会迭代三个空的，对应于哺乳动物，我希望这些对象不被迭代，只迭代具有"class"为"reptile"的对象。我该如何实现这个目标？
问题描述：如何使用*ngFor迭代JSON元素，只有当它们满足条件时才迭代。
问题原因：用户想要在Angular中使用*ngFor指令来迭代JSON元素，但是只想迭代满足特定条件的元素。然而，*ngFor指令本身并不支持条件过滤。
解决方法：用户可以使用*ngFor指令和*ngIf指令结合起来实现条件迭代。具体步骤如下：
1. 创建一个过滤函数，用于根据给定条件过滤JSON元素。
filterItemsOfType(type){
return this.items.filter(x => x.class == type);
}
2. 在HTML模板中使用*ngFor指令和*ngIf指令。在*ngFor指令中调用过滤函数，并在*ngIf指令中设置条件。
{{item.name}}
这样，只有满足条件的JSON元素才会被迭代和显示。
相关链接：
- [Stack Overflow上的解决方案](https://stackoverflow.com/questions/42931735)
问题的原因是在使用*ngFor循环遍历JSON元素时，只有满足某个条件的元素才需要被迭代。解决方法有两种：
第一种方法是使用
使用
第二种方法是在组件中进行过滤，并只将需要显示的数据传递给模板，如下所示：
// 在接收到动物数据后，在控制器中进行过滤 this.reptiles = this.animals.filter(a => a.class === "reptile"); // 模板中进行迭代...
也可以编写一个filterBy管道，或者从现有库（如ngx-pipes）中使用一个。但要注意，Angular不鼓励使用管道，因为它容易导致性能问题。
此外，还有一条提示是将ngFor指令写在ng-container上，否则可能会导致相同的问题。
原文中还提到了一个问题是通过上述简单的修复方法，仍然会迭代空的哺乳动物
以上就是关于如何只在满足条件时使用*ngFor循环遍历JSON元素的问题的原因和解决方法的整理。
问题出现的原因是在使用*ngFor循环遍历JSON元素时，希望只有当元素满足特定条件时才进行遍历。然而，*ngFor指令本身并没有提供过滤功能，因此需要在组件中对数据进行筛选。
解决方法是在组件中使用filter()方法对数据进行筛选，然后将筛选后的结果赋值给一个新的变量。在HTML模板中，使用这个新变量进行*ngFor循环遍历。
下面是解决方法的示例代码：
在组件中的代码：
this.filteredAnimals = this.animals.filter(animal => animal.class === "reptile");
在HTML模板中的代码：
通过这种方法，只有满足条件（class为"reptile"）的动物元素才会被遍历和显示在HTML模板中。
希望这能帮到你。