在Angular项目开发中，我们经常需要处理后端返回的JSON格式数据，其中根据ID匹配筛选特定数据是最常用的操作之一。无论是列表页的详情跳转，还是多数据源的关联匹配，掌握高效的筛选方法都能大幅提升开发效率。
使用内置filter管道实现筛选
Angular早期版本提供了filter管道，可以直接对数组数据进行筛选，不过在Angular 6之后该管道被移除了，若你使用的是低版本Angular，可以参考以下实现方式。
首先定义JSON数据结构和组件代码：
// 定义数据接口
export interface User {
id: number;
name: string;
age: number;
}
// 组件内数据定义
userList: User[] = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
targetId: number = 2;
在模板中使用filter管道筛选：
<div *ngFor="let user of userList | filter:{id: targetId}">
<p>ID: {{user.id}}</p>
<p>姓名: {{user.name}}</p>
<p>年龄: {{user.age}}</p>
</div>
自定义筛选函数实现ID匹配
由于新版本Angular移除了内置filter管道，自定义筛选函数是更通用的方案，适配所有Angular版本，逻辑也更灵活可控。
组件内定义筛选方法
我们可以在组件类中定义一个根据ID筛选的方法，接收目标ID和原始数据数组，返回匹配的结果。
// 根据ID筛选用户数据的方法
filterUserById(targetId: number, list: User[]): User | undefined {
return list.find(item => item.id === targetId);
}
// 也可以返回筛选后的数组，适配多个匹配的场景
filterUsersById(targetId: number, list: User[]): User[] {
return list.filter(item => item.id === targetId);
}
模板中调用筛选方法
在模板中直接调用组件定义的方法，传入目标ID和原始数据即可获取筛选结果。
<!-- 单个匹配场景 -->
<div *ngIf="filterUserById(targetId, userList) as user">
<p>匹配到的用户ID: {{user.id}}</p>
<p>匹配到的用户姓名: {{user.name}}</p>
</div>
<!-- 多个匹配场景 -->
<div *ngFor="let user of filterUsersById(targetId, userList)">
<p>ID: {{user.id}}</p>
<p>姓名: {{user.name}}</p>
</div>
在Service中封装通用筛选逻辑
如果多个组件都需要使用ID筛选JSON数据的功能，可以把筛选逻辑封装到Service中，实现代码复用。
import { Injectable } from '@angular/core';
import { User } from './user.model';
@Injectable({
providedIn: 'root'
})
export class DataFilterService {
// 通用ID筛选方法，支持泛型
filterById<T extends { id: number }>(targetId: number, list: T[]): T | undefined {
return list.find(item => item.id === targetId);
}
// 批量ID筛选，支持传入多个ID
filterByIds<T extends { id: number }>(targetIds: number[], list: T[]): T[] {
return list.filter(item => targetIds.includes(item.id));
}
}
在组件中引入Service后调用即可：
import { Component, OnInit } from '@angular/core';
import { DataFilterService } from './data-filter.service';
import { User } from './user.model';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
userList: User[] = [];
matchedUser: User | undefined;
constructor(private filterService: DataFilterService) {}
ngOnInit() {
// 模拟获取JSON数据
this.userList = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
];
// 调用Service筛选ID为2的数据
this.matchedUser = this.filterService.filterById(2, this.userList);
}
}
注意事项
- 如果JSON数据中的ID是字符串类型，筛选时需要保证类型一致，避免因为
===严格匹配导致筛选失败，比如字符串ID需要和目标ID都转为字符串再比较。 - 使用
find方法时，如果找不到匹配项会返回undefined，模板中使用时最好先做非空判断，避免出现报错。 - 如果数据量较大，频繁筛选可以考虑先建立ID到数据的映射表，提升筛选性能，避免每次都遍历整个数组。