Фильтрация по циклу по * ngIf в Angular дает ошибку

Question

Я пытаюсь отфильтровать некоторые элементы с помощью * ngIf в списке, полученном с помощью циклов, но это дает ошибку.Пожалуйста, помогите.

abc.component.html

  <ul>
    <li *ngFor="let x of students" *ngIf="x.age < 30">{{x.name}},{{x.age}}</li>
  </ul>

abc.component.ts

  students = [
    {name: "Jack", age: 29, gender:"male", country: "USA"},
    {name: "Ronald", age: 33, gender: "male", country: "UK"},
    {name: "Lisa", age: 19, gender: "female", country: "UK"},
    {name: "Donald", age: 43, gender: "male", country: "Austrailia"},
    {name: "Simera", age: 23, gender: "female", country: "Italy"}
  ];

Ошибка:

Пожалуйста, помогите отфильтровать строки элементов li на основе возраста <30 в приведенном выше примере.Спасибо. </p>

Answer 1

Ошибка в значительной степени объясняет это для вас.Используйте ng-container для одного из них.Это специальный тег, который не будет отображаться в шаблоне, но позволяет размещать на нем структурные директивы (например, ngIf, ngFor).

<ul>
  <ng-container *ngFor="let x of students">
    <li *ngIf="x.age < 30">
      {{x.name}},{{x.age}}
    </li>
  </ng-container>
</ul>

---

Однако рекомендуетсяотфильтровывать элементы в коде, а не в шаблоне.Используйте метод Array#filter и укажите свой предикат в качестве аргумента.Это делает код более читабельным, тестируемым, производительным и лучше разделяет задачи.