在 Angular 中通过 *ngIf 过滤循环给出错误答案

【问题标题】：Filtering on a loop by *ngIf in Angular giving error在 Angular 中通过 *ngIf 过滤循环给出错误
【发布时间】：2019-03-05 04:17:23
【问题描述】：

我试图通过 *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"}
  ];

错误：

请帮助在上面的示例中根据年龄

【问题讨论】：

你不能在同一个元素上有ngIf 和ngFor。使用students.filter(s => s.age < 30) 过滤 TS 代码中的数组
How to apply filters to *ngFor?的可能重复
@Matt - 不，不是。那个管子太烂了。
为此使用管道确实是一个糟糕的决定。最好的解决方案是简单地在代码中而不是在模板中进行过滤，但是学习如何摆脱上述错误也很重要。
@user184994：如果这是一个答案，我会接受的。（而不是评论）。 -- 成功了。

标签： javascript angular angular-directive ngfor angular-ng-if

【解决方案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 方法并将您的谓词指定为参数。这使代码更具可读性、可测试性、性能，并具有更好的关注点分离。

【讨论】：

除了 ul 上的 ngFor 之外，您基本上发布了 sajeetharan 发布的相同答案
@faceturn 他们的答案生成<ul><li>1</li></ul> <ul><li>2</li></ul>，这个答案生成<ul><li>1</li><li>2</li></ul>，这是完全不同的（现在他们的已被删除）。
是的，这也是我在评论中提到的。我的意思是你回答的第二部分
我添加了关于filter 的部分，当我从 OP 的 cmets 看到他们希望过滤，而不是了解 为什么错误发生以及一般如何避免它.