Angular按developer id过滤展示对应开发者关联客户的问题

当前ShowClientComponent初始化时直接调用无参的getClientList()方法拉取全量客户数据，没有绑定当前选中的开发者ID做匹配过滤，因此点击查看按钮后会展示所有客户，而非目标开发者的关联客户。

根据业务数据量规模，二选一即可：

方案一：前端本地过滤（适合客户总数据量低于1000条的场景） #

无需改动后端接口，拉取全量客户后在前端做匹配过滤，改造成本低。

1. 点击开发者表格的「查看关联客户」按钮时，把当前行对应的developerId传到客户展示组件，可通过路由参数、父子组件传值、弹窗传参任意一种方式传递，以下以路由传参为例：
2. 改造组件代码，引入路由依赖、操作符，在初始化时完成过滤：

   import { ActivatedRoute } from '@angular/router';
   import { map } from 'rxjs/operators';
   
   export class ShowClientComponent implements OnInit {
     clientList$!: Observable<any[]>;
     developerList$! : Observable<any[]>;
     private currentDevId: string | number;
   
     constructor(
       private clientService: ClientApiService,
       private developerService : DeveloperApiService,
       private route: ActivatedRoute
     ) { }
   
     ngOnInit(): void {
       // 从路由参数取当前开发者ID，参数名和你路由配置的保持一致
       this.currentDevId = this.route.snapshot.params['devId'];
       this.developerList$ = this.developerService.getDeveloperList();
       // 拉取全量客户后，筛选出关联字段匹配当前开发者ID的条目
       this.clientList$ = this.clientService.getClientList().pipe(
         map(list => list.filter(client => client.developerId === this.currentDevId))
       );
     }
   }
   

   注意：将代码里的developerId替换为你客户表中存储关联开发者ID的实际字段名。

方案二：后端接口过滤（数据量大时推荐使用） #

如果客户总数据量较大，拉取全量数据再过滤会浪费带宽、拖慢页面加载速度，建议改造后端接口支持按参数筛选：

1. 改造Client Service的请求方法，支持传入开发者ID参数：

   import { HttpClient, HttpParams } from '@angular/common/http';
   
   constructor(private http:HttpClient) { }
   
   getClientList(devId?: string | number):Observable<any[]>{
     let reqParams = new HttpParams();
     if (devId) {
       reqParams = reqParams.set('developerId', devId.toString());
     }
     return this.http.get<any[]>(this.clientApiUrl, { params: reqParams });
   }
   

2. 后端接口新增developerId入参，查询数据时增加匹配条件，仅返回对应开发者关联的客户数据。
3. 组件初始化时直接传入当前开发者ID，拉取已经过滤好的客户列表：

   ngOnInit(): void {
     this.currentDevId = this.route.snapshot.params['devId'];
     this.developerList$ = this.developerService.getDeveloperList();
     this.clientList$ = this.clientService.getClientList(this.currentDevId);
   }
   

• 点击按钮跳转/唤起客户列表时，确认当前行的开发者ID没有漏传、传错
• 如果是弹窗展示客户列表，直接在按钮点击回调里把当前行的developerId传入弹窗实例即可，无需走路由传参

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