仅在遇到条件的情况下，使用 *ngson的迭代元素

Question

我正在研究一个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"
   },
 ]
}

，我只想用"类"迭代对象：" 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

简单的修复是使用 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）中取出一根管道。但是要当心角度会灰心，因为它很容易成为性能陷阱。

Answer 2

我认为您可以使用此解决方案

只需按类属性过滤：

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

希望它会有所帮助