只有在遇到条件时才使用* ngFor迭代json的元素

Question

我正在研究一个通过服务调用json的角度4项目，一切都运行得非常好，我的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"
   },
 ]
}

我想只用“类”迭代对象：“爬行动物”

我做了这个结构：

  <div class="col-12 mb-3" *ngFor="let reptiles of animals">
    <div *ngIf = "reptiles.class == reptile">
      <div class="row">
        <div class="col-12">
          <h5 class="py-3 bg-dark text-white pl-3 mx-0 mb-3">{{reptiles.name}}</h5>
          <p class="py-3 bg-dark text-white font-weight-light pl-3 m-0">{{reptiles.class}}</p>
        </div>
      </div>
    </div>
  </div>

但是会发生的是它迭代三个空

<div class="col-12 mb-3" *ngFor="let reptiles of animals">
</div>

对应于哺乳动物，我希望那些对象根本不迭代，我想只迭代具有“爬行动物”类的对象。我怎么能实现这一目标？

Answer 1

我认为你可以使用这个solution

只需按类属性过滤：

filterItemsOfType(type){
    return this.items.filter(x => x.class == type);
}

干杯，

@carlosrojas_o

Answer 2

简单的解决方法是使用ng-container而不是div来迭代：

<ng-container *ngFor="let reptiles of animals">
    <div class="col-12 mb-3" *ngIf="reptiles.class == reptile">
        <div>
            <!-- ... -->
        </div>
    </div>
</ng-container>

当然，模板现在仍在迭代这些条目，但它不会为它创建任何DOM节点（ng-container的魔力）。

可能更好的解决方法是在组件中进行过滤，并仅将要显示的数据传递给模板：

// In your controller after receiving the animals data:
this.reptiles = this.animals.filter(a => a.class === "reptile");

// Template
<div *ngFor="let reptile of reptiles">...</div>

您也可以编写一个filterBy管道或从现有的库中取一个管道，例如ngx-pipes。但请注意，Angular不鼓励因为它很容易成为性能陷阱。

Answer 3

你只需要在组件中过滤你的数据，如下所示：

this.filteredAnimals = this.animals.filter(animal => animal.class === "reptile"); // now use filteredAnimals in html template

希望它会有所帮助