Angular中如何通过动态ID调用商品API获取详情信息？

我正在为一家水果店开发前端，能正常调用商品列表接口获取数据，但不知道怎么通过带动态ID的URL获取单个商品的价格、分类等详情。当前products.name能正常显示，但products.price拿不到，因为这个字段需要通过商品ID对应的接口获取。

现有代码 #

CardComponent 代码 #

export class CardComponent implements OnInit {
  productsList: any;
  productsIdList: any;
  listaids:[] | any;

  constructor(private productsService: ProductsService,private router: Router,) { }

  ngOnInit(): void {
    this.productsService.getData().subscribe((data) => {
      this.productsList = data.products;
    })
  }
}

ProductsService 代码 #

export class ProductsService {

  public baseUrl = "https://api.predic8.de:443/shop/products/";
  
  constructor(private httpClient: HttpClient) { }

  getData(): Observable<any> {
    return this.httpClient.get(this.baseUrl)
  }
}

尝试的实现（存在问题） #

我曾尝试在Service中添加通过ID获取商品的方法：

getProductById(id:number): Observable<any> {
  return this.httpClient.get(`${this.baseUrl}/${id}`)
}

并在Component中调用：

productDetails(id:number){
  this.productsService.getProductById(id).subscribe((data) => {
    this.productsIdList = data.ids;
  })
}

但实现逻辑有误，接口返回的数据里没有ids字段，现在需要实现动态切换商品ID获取详情的功能，还疑惑是否和HttpParams有关。

HTML 代码 #

<div class="cards-container">
    
    <mat-card class="new-card"  *ngFor="let products of productsList">
        <mat-card-header>
            <mat-card-title>{{products.name}}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
        <mat-card-content>product description</mat-card-content>
        <mat-card-actions align="end">
            <button mat-raised-button> a {{products.price}}</button>
        </mat-card-actions>
    </mat-card>
    </div>

解决方案 #

1. 修正接口数据处理逻辑 #

你添加的getProductById方法本身是正确的，问题出在对返回数据的处理上：调用单个商品接口后，返回的是单个商品对象，直接包含price、category等字段，不需要取data.ids。

2. 两种实现方式 #

方式一：初始化时批量获取所有商品详情（适合商品数量少的场景）

修改CardComponent的ngOnInit，拿到商品列表后逐个请求详情，补充价格等字段：

ngOnInit(): void {
  this.productsService.getData().subscribe((data) => {
    this.productsList = data.products;
    // 遍历商品列表，补充详情
    this.productsList.forEach((product: any) => {
      this.productsService.getProductById(product.id).subscribe((detail) => {
        product.price = detail.price;
        product.category = detail.category;
      });
    });
  });
}

修改后HTML中的{{products.price}}即可正常显示。

方式二：点击按钮时按需获取详情（适合商品数量多，避免初始请求过载）

修改Component的productDetails方法，将获取到的详情绑定到对应商品：

productDetails(product: any){
  this.productsService.getProductById(product.id).subscribe((detail) => {
    product.price = detail.price;
    product.category = detail.category;
    // 如需单独存储详情可赋值给productsIdList
    this.productsIdList = detail;
  });
}

同时修改HTML按钮的绑定逻辑：

<button mat-raised-button (click)="productDetails(products)">
  {{products.price ? '价格：' + products.price : '查看价格'}}
</button>

3. 优化建议 #

• 不需要使用HttpParams，该接口是通过URL路径传递ID，而非查询参数。
• 建议定义商品类型接口，避免类型错误：

interface Product {
  id: number;
  name: string;
  price?: number;
  category?: { name: string };
}

• 批量请求时可使用forkJoin减少订阅嵌套，提升性能：

import { forkJoin } from 'rxjs';

// ...

ngOnInit(): void {
  this.productsService.getData().subscribe((data) => {
    this.productsList = data.products;
    // 批量创建请求数组
    const detailRequests = this.productsList.map((p: Product) => this.productsService.getProductById(p.id));
    forkJoin(detailRequests).subscribe((details) => {
      details.forEach((detail, index) => {
        this.productsList[index].price = detail.price;
        this.productsList[index].category = detail.category;
      });
    });
  });
}

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