Angular中如何在二级详情页展示选中产品的特定数据

现有Mock JSON文件用于提供Product页面的产品列表数据，预期实现效果为点击选中某一产品卡片后，Product Detail二级页面仅展示对应选中产品的信息；实际效果为详情页展示所有产品的全部内容，且无法显示选中卡片对应的product_name，需定位TypeScript代码、JSON文件或其他环节的实现遗漏点。

• 路由跳转未传参：列表页点击卡片跳转到详情页时，没有携带当前选中产品的唯一标识，详情页无法获知需要展示哪条产品数据
• 详情页逻辑错误：进入详情页后直接拉取全量产品列表，且未做单条数据过滤，直接遍历全量数组渲染，必然展示所有产品内容
• 基础语法/拼写错误：
  • 生命周期接口名写错：OnIt应为OnInit
  • 组件装饰器属性名写错：templateURL应为templateUrl，styleURLs应为styleUrls，样式路径字符串缺失引号
  • HTTP请求语法错误，不符合Angular HttpClient的调用格式
  • TS类型定义和实际JSON结构不匹配：接口定义的字段是product_detail_1，实际JSON字段是product_details_1（多了s）；接口未匹配JSON外层包裹productList字段的结构
• 模板变量未定义：详情页模板直接使用product.product_name，但组件类中只定义了全量产品数组products，没有定义单个product变量
• Mock JSON格式不合法：数组和对象未正确闭合，会导致JSON解析失败

1. 路由配置增加动态参数 #

首先在路由配置文件（通常为app-routing.module.ts）中，给产品详情路由配置动态参数，支持传递产品标识：

const routes: Routes = [
  // 其他路由...
  { path: 'productDetails/:productName', component: ProductDetailsComponent }
];

2. 修正产品列表页（Product组件） #

product.component.ts #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";

// 单条产品数据结构，和JSON字段完全对齐
interface Product {
  product_name: string;
  product_details_1: string;
  product_details_2: string;
  product_details_3: string;
}

// 接口返回的整体结构，匹配JSON外层包裹productList字段的格式
interface ProductListResponse {
  productList: Product[];
}

@Component ({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  products: Product[] = [];

  constructor(private http: HttpClient) {}
  
  ngOnInit(): void {
   this.loadAllProducts();
  }

  loadAllProducts() {
    this.http.get<ProductListResponse>('http://localhost:3000/productList').subscribe(data => {
     this.products = data.productList;
    })
   }
}

product.component.html #

跳转路由时携带当前选中产品的名称参数：

<h4>Department 1</h4>
<div class="application-card" [routerLink]="['/productDetails', product.product_name]"
  *ngFor="let product of products">
  {{ product.product_name }}
</div>

3. 修正产品详情页（ProductDetails组件） #

productdetails.component.ts #

引入路由服务获取传递的参数，拉取数据后过滤出目标产品：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { ActivatedRoute } from "@angular/router";

interface Product {
  product_name: string;
  product_details_1: string;
  product_details_2: string;
  product_details_3: string;
}

interface ProductListResponse {
  productList: Product[];
}

@Component ({
  selector: 'app-productdetails',
  templateUrl: './productdetails.component.html',
  styleUrls: ['./productdetails.component.css']
})
export class ProductDetailsComponent implements OnInit {
  selectedProduct: Product | undefined;

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute
  ) {}
  
  ngOnInit(): void {
   const targetProductName = this.route.snapshot.paramMap.get('productName');
   this.loadSelectedProduct(targetProductName);
  }

  loadSelectedProduct(targetName: string | null) {
    this.http.get<ProductListResponse>('http://localhost:3000/productList').subscribe(data => {
      this.selectedProduct = data.productList.find(item => item.product_name === targetName);
    })
   }
}

productdetails.component.html #

移除全量遍历逻辑，直接展示单个选中产品的信息，加安全导航符避免数据未加载时报错：

<h1>Product Details - {{ selectedProduct?.product_name }}</h1>

<div *ngIf="selectedProduct">
  <p>{{ selectedProduct.product_details_1 }}</p>
  <p>{{ selectedProduct.product_details_2 }}</p>
  <p>{{ selectedProduct.product_details_3 }}</p>
</div>

4. 修正Mock JSON格式 #

补全缺失的闭合括号，保证格式合法：

{
   "productList": [
   {
     "product_name": "Product 1",
     "product_details_1":  "1st detail about Product 1",
     "product_details_2":  "2nd detail about Product 1",
     "product_details_3":  "3rd detail about Product 1"
   },
   {
     "product_name": "Product 2",
     "product_details_1":  "1st detail about Product 2",
     "product_details_2":  "2nd detail about Product 2",
     "product_details_3":  "3rd detail about Product 2"
   },
   {
     "product_name": "Product 3",
     "product_details_1":  "1st detail about Product 3",
     "product_details_2":  "2nd detail about Product 3",
     "product_details_3":  "3rd detail about Product 3"
   }
  ]
}

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