Angular中如何基于关联JSON数据筛选展示指定人员的项目卡片？

首先得明确你的JSON数据关联逻辑，先假设你的数据结构是这种合理的关联形式（如果和你的实际结构有出入，直接调整字段名即可）：

{
  "collaborateurs": [
    { "id": 1, "name": "张三", "teamId": 101 },
    ...
  ],
  "teams": [
    { "id": 101, "name": "前端团队", "projectIds": [201, 202] },
    ...
  ],
  "project": [
    { "id": 201, "name": "用户管理系统" },
    { "id": 202, "name": "数据可视化平台" },
    ...
  ]
}

步骤1：在详情组件类中处理数据，别在模板里硬写复杂筛选 #

模板里的*ngFor只负责遍历预处理好的数组，复杂的关联筛选逻辑放在组件类里完成，既清晰又方便调试。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AppService } from '../app.service';

@Component({
  selector: 'app-collaborator-detail',
  templateUrl: './collaborator-detail.component.html',
  styleUrls: ['./collaborator-detail.component.css']
})
export class CollaboratorDetailComponent implements OnInit {
  currentCollaborator: any;
  teamProjects: any[] = [];

  constructor(
    private route: ActivatedRoute,
    private appService: AppService
  ) { }

  ngOnInit(): void {
    // 获取路由里的当前人员ID，转成数字类型匹配JSON里的ID
    const collabId = +this.route.snapshot.paramMap.get('id')!;
    
    // 从服务拉取所有JSON数据
    this.appService.getAllData().subscribe(data => {
      // 1. 定位当前人员
      this.currentCollaborator = data.collaborateurs.find(c => c.id === collabId);
      
      if (this.currentCollaborator) {
        // 2. 找到该人员所属的团队
        const userTeam = data.teams.find(t => t.id === this.currentCollaborator.teamId);
        
        if (userTeam) {
          // 3. 筛选出该团队关联的所有项目
          this.teamProjects = data.project.filter(p => userTeam.projectIds.includes(p.id));
        }
      }
    });
  }
}

步骤2：模板中用卡片展示处理好的项目列表 #

直接遍历预处理后的teamProjects数组，同时处理空数据场景，避免出现空卡片：

<div class="collab-detail">
  <h2>{{ currentCollaborator?.name }} 的团队项目</h2>
  
  <!-- 项目卡片容器 -->
  <div class="project-cards" *ngIf="teamProjects.length > 0; else noProjects">
    <div class="project-card" *ngFor="let project of teamProjects">
      <h3>{{ project.name }}</h3>
      <!-- 这里可以追加项目的其他附加数据 -->
    </div>
  </div>
  
  <!-- 无项目时的提示 -->
  <ng-template #noProjects>
    <p>该团队暂无关联项目</p>
  </ng-template>
</div>

常见问题排查 #

• 异步数据未处理：必须在订阅数据回调里处理筛选逻辑，不能在ngOnInit里同步操作（从JSON加载数据是异步行为）。
• 字段名不匹配：检查JSON里的字段名，比如是teamId还是team_id，projectIds还是project_ids，必须和代码里的字段完全一致。
• 空值安全：用?.可选链操作符避免空指针错误，比如currentCollaborator?.name。
• ID类型不匹配：路由参数返回的是字符串，要加+转成数字，否则和JSON里的数字ID匹配不上。

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