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"
   },
 ]
}

我希望只使用＆＃34;类＆＃34;迭代对象。：＆＃34;爬行动物＆＃34;

我做了这个结构：

  <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>

对应于哺乳动物，我希望对象根本不进行迭代，我想只用类＆＃34;爬行动物＆＃34;迭代对象。我怎么能实现这个目标？

Answer 1

简单的解决方法是使用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 2

我认为您可以使用此solution

只需按类属性过滤：

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

干杯，

@carlosrojas_o

Answer 3

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

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

希望它会有所帮助

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

3 个答案: