代码之家 › 专栏 › 技术社区 › Deadpool

角度给定误差下的*ngIf滤波

ngif ngfor angular-directive angular javascript

1

Deadpool · 技术社区 · 7 年前

我试图通过*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。谢谢您。

1 回复 | 直到 7 年前

1

Lazar LjubenoviÄ 7 年前

这个错误对你来说很清楚。使用 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 方法并指定谓词作为参数。这使得代码更具可读性、可测试性和性能,并且具有更好的关注点分离。