Angular模板中动态筛选数组并分类展示奇偶数字

嘿，我来帮你搞定这个数字分类展示的需求～首先得修正模板里的一个小问题：你原来的外层*ngFor会循环数组里的每一个数字，生成多组“奇数/偶数”板块，这肯定不是你想要的效果。下面给你两种简单可行的实现方式：

方法一：组件内拆分数据（推荐） #

这种方式把数据处理逻辑放在组件类里，模板只负责渲染，代码更清晰，性能也更好。

首先修改你的AppComponent，添加两个getter属性来分别获取奇数和偶数数组：

class AppComponent {
  numbers: number[] = [1, 2, 3, 4, 5];

  // 获取所有奇数
  get oddNumbers(): number[] {
    return this.numbers.filter(num => num % 2 !== 0);
  }

  // 获取所有偶数
  get evenNumbers(): number[] {
    return this.numbers.filter(num => num % 2 === 0);
  }
}

然后更新模板，去掉多余的外层*ngFor，直接分别渲染两个列表：

<div>
  <h1>Odd Numbers</h1>
  <ul>
    <li *ngFor="let num of oddNumbers">{{ num }}</li>
  </ul>
</div>
<div>
  <h1>Even Numbers</h1>
  <ul>
    <li *ngFor="let num of evenNumbers">{{ num }}</li>
  </ul>
</div>

方法二：模板内直接过滤（不推荐用于大数据量） #

如果你不想修改组件类，也可以在模板里直接用filter方法，但要注意：Angular的变更检测会每次都执行这个过滤操作，数据量大的时候可能影响性能。

模板代码如下：

<div>
  <h1>Odd Numbers</h1>
  <ul>
    <li *ngFor="let num of numbers.filter(n => n % 2 !== 0)">{{ num }}</li>
  </ul>
</div>
<div>
  <h1>Even Numbers</h1>
  <ul>
    <li *ngFor="let num of numbers.filter(n => n % 2 === 0)">{{ num }}</li>
  </ul>
</div>

两种方式都能实现你要的效果，个人更推荐第一种，因为逻辑和视图分离，也更高效～

内容的提问来源于stack exchange，提问作者Eyal