Angular内存Web API无法获取单个学生数据问题求助

我正在开发一个基于Angular的学生CRUD应用，参考Tour of Heroes教程实现。最初使用mock-students模拟数据时一切正常，切换到In-Memory Web API后，学生列表能正常获取，但点击详情按钮跳转至StudentResultComponent时，单个学生数据无法加载。

相关代码文件 #

1. student.service.ts #

// 请粘贴你的student.service.ts代码

2. StudentResultComponent（学生详情组件） #

// 请粘贴组件的TS代码，重点是数据获取、路由参数处理部分

3. in-memory-data.service.ts #

// 请粘贴你的In-Memory数据服务代码

运行时报错截图 #


排查与解决方法 #

1. 核对请求URL规则 #

In-Memory Web API默认路由规则：如果数据集合名为students，单个资源请求URL应为/api/students/:id。检查student.service.ts中的getStudent方法是否符合：

// 正确示例
getStudent(id: number): Observable<Student> {
  const url = `${this.studentsUrl}/${id}`; // this.studentsUrl需为'/api/students'
  return this.http.get<Student>(url).pipe(
    catchError(this.handleError<Student>(`getStudent id=${id}`))
  );
}

2. 确认In-Memory数据结构 #

确保生成的学生数据包含数字类型的唯一id字段，且集合键名与请求URL中的资源名一致：

// in-memory-data.service.ts正确示例
createDb() {
  const students = [
    { id: 1, name: '张三', grade: '高一' },
    { id: 2, name: '李四', grade: '高二' }
  ];
  return { students }; // 键名必须和请求的资源名（students）完全匹配
}

3. 检查组件路由参数处理 #

确认StudentResultComponent是否正确将路由参数转为数字类型（In-Memory API要求id为数字）：

// StudentResultComponent的参数处理示例
ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const id = Number(params.get('id')); // 必须转成数字，不能直接用字符串id
    this.getStudent(id);
  });
}

getStudent(id: number): void {
  this.studentService.getStudent(id).subscribe(student => this.student = student);
}

4. 分析控制台错误 #

打开浏览器开发者工具控制台，根据错误码定位问题：

• 404：请求URL错误（比如资源名拼写错误、id不存在）
• 400：请求的id类型错误（比如传了字符串而非数字）

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