Angular路由跳转后产品详情组件对象属性无法显示求助

你遇到的核心问题是：通过?id=查询参数请求产品数据时，JSON Server返回的是包含单个产品对象的数组，但你的组件将其直接赋值给了期望为单个对象的product变量。HTML模板中尝试访问product.imageUrl等属性时，由于数组没有这些属性，导致渲染失败（虽然*ngIf="product"为真，因为数组是真值，但属性访问返回undefined，页面无内容）。

有两种方式可以解决这个问题：

方式1：使用路径参数请求单个产品（推荐） #

JSON Server支持通过/products/:id的路径参数直接返回单个对象，无需处理数组。修改你的DetailsService代码：

@Injectable()
export class DetailsService {

  constructor(private http:HttpClient) { }
  path = "http://localhost:3000/products";

  getProductById(productId: any): Observable<Product> {
    let newPath = this.path
    
    if (productId) {
      newPath += `/${productId}`; // 替换查询参数为路径参数
    }
    console.log(newPath);
    return this.http.get<Product>(newPath).pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );
  }
  // handle error func here
}

这种方式下，HTTP请求返回的直接是单个Product对象，组件中赋值给this.product后，模板就能正常访问属性。

方式2：在服务中提取数组第一个元素 #

如果你不想修改请求路径，可以在服务中处理返回的数组，提取第一个元素：

@Injectable()
export class DetailsService {

  constructor(private http:HttpClient) { }
  path = "http://localhost:3000/products";

  getProductById(productId: any): Observable<Product> {
    let newPath = this.path
    
    if (productId) {
      newPath += "?id=" + productId;
    }
    console.log(newPath);
    return this.http.get<Product[]>(newPath).pipe( // 先声明返回数组类型
      map(products => products[0]), // 提取数组第一个元素作为单个产品
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );
  }
  // handle error func here
}

你的详情页HTML模板存在重复使用product.price的错误（比如Features部分的三个列表项都用了product.price），建议修正为对应的产品属性，例如：

<section class="listing-features">
  <h2 class="section-heading">About this housing location</h2>
  <ul>
    <li>Units available: {{product.unitsAvailable}}</li> <!-- 替换为正确属性 -->
    <li>Does this location have wifi: {{product.hasWifi}}</li>
    <li>Does this location have laundry: {{product.hasLaundry}}</li>
  </ul>
</section>

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