Angular单产品数据获取失败：详情组件404错误求助

你碰到的404问题本质很明确：本地静态JSON文件没法像后端REST API那样，通过/${id}拼接路径来获取单条数据。服务器会把./assets/frisur.json/1当成一个完全不存在的文件路径，直接返回404是必然的结果。

下面给你两种可行的解决方案，按需选择：

方案一：先获取完整列表，前端筛选单条数据 #

这是最直接的修改方式，不需要调整JSON文件结构，只需要修改FrisurService里的getFrisur方法：

getFrisur(id: number): Observable<Frisur> {
  // 先调用已有的获取列表方法，再用find筛选对应ID的数据
  return this.getFrisurList().pipe(
    map(frisureList => frisureList.find(frisur => frisur.id === id))
  );
}

额外优化建议： #

• 注意把路由参数里的id转成数字类型（因为路由参数默认是字符串），避免匹配失败：

  ngOnInit() {
    const id = +this.route.snapshot.params['id']; // 加号把字符串转数字
    this.subs = this.service.getFrisur(id)
      .subscribe(res => { this.frisur = res });
  }
  

• 可以考虑用async管道代替手动订阅，减少内存泄漏风险：
  组件里改成：

  frisur$: Observable<Frisur>;
  
  ngOnInit() {
    const id = +this.route.snapshot.params['id'];
    this.frisur$ = this.service.getFrisur(id);
  }
  

  模板里调整为：

  <div class="container container1" *ngIf="frisur$ | async as frisur">
    <div class="innen-div">
      <div><img class="image-div" [src]="frisur.avatar"></div>
      <p class="spacer mat-body-1"><b>{{ frisur.style }}</b></p>
      <p class="spacer mat-body-1">{{ frisur.model }}</p>
      <a mat-stroked-button color="primary" routerLink="/">Go Back</a>
    </div>
  </div>
  

  这样就不用手动在ngOnDestroy里取消订阅了。

方案二：修改JSON文件结构（适合数据量小的场景） #

如果你的数据量不大，可以把JSON改成以ID为键的对象结构，比如：

{
  "1": { "id": 1, "style": "波波头", "model": "短发款", "avatar": "./assets/1.jpg" },
  "2": { "id": 2, "style": "大波浪", "model": "长发款", "avatar": "./assets/2.jpg" }
}

然后修改服务里的getFrisur方法：

getFrisur(id: number): Observable<Frisur> {
  return this.http.get<{[key: string]: Frisur}>(this.apiUrl).pipe(
    map(res => res[id.toString()]) // 把数字ID转成字符串键
  );
}

这种方式可以直接从JSON对象中取出对应ID的条目，但需要维护JSON的结构，适合数据固定且条目不多的场景。

最后提醒：不管用哪种方案，都要确保你的Frisur接口定义了id字段，否则筛选或匹配会失效哦。

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