Angular 4中获取产品与分类数据后如何关联二者？

Hey there! Let's get your product categories and their associated items linked up properly. Since you're new to Angular, I'll break this down step by step—we'll cover both a performance-first approach (fetching all data at once and grouping frontend) and the per-category request approach you initially thought of.

第一步：更新你的产品服务 #

First, let's make your ProductsService more flexible to handle both categories and products (with or without category filters).

修改后的服务代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Products } from '../models/Products';

// 定义分类类型，根据你的API返回字段调整
interface Category {
  id: string;
  name: string;
  // 添加其他分类相关字段（如果API返回）
}

@Injectable({ providedIn: 'root' })
export class ProductsService {
  private baseUrl = 'http://itgenesys.com/mdevices/webservices/api.php';

  constructor(private http: HttpClient) { }

  // 获取所有分类列表
  getCategories(): Observable<{ status: string; msg: string; results: Category[] }> {
    return this.http.get<{ status: string; msg: string; results: Category[] }>(
      `${this.baseUrl}?rquest=getcategories` // 替换为你的分类API接口
    );
  }

  // 获取全部产品（如果API支持不带catid返回所有产品）
  getAllProducts(): Observable<{ status: string; msg: string; results: Products[] }> {
    return this.http.get<{ status: string; msg: string; results: Products[] }>(
      `${this.baseUrl}?rquest=getproducts`
    );
  }

  // 根据分类ID获取对应产品（保留该方法备用）
  getProductsByCategory(catId: string): Observable<{ status: string; msg: string; results: Products[] }> {
    return this.http.get<{ status: string; msg: string; results: Products[] }>(
      `${this.baseUrl}?rquest=getproducts&catid=${catId}`
    );
  }
}

第二步：组件中关联分类与产品 #

推荐方案：前端分组（减少HTTP请求） #

如果你的API可以返回全部产品，这是最优解——只需要2个请求（分类+全部产品），然后在前端把产品按分类ID分组，性能更优。

组件代码

import { Component, OnInit } from '@angular/core';
import { ProductsService } from '../services/products.service';
import { Products } from '../models/Products';
import { forkJoin } from 'rxjs';

// 定义关联后的分类+产品结构
interface CategoryWithProducts {
  category: { id: string; name: string };
  products: Products[];
}

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

  constructor(private productsService: ProductsService) { }

  ngOnInit(): void {
    // 并行请求分类和全部产品，提升加载速度
    forkJoin([
      this.productsService.getCategories(),
      this.productsService.getAllProducts()
    ]).subscribe(([categoriesRes, productsRes]) => {
      const categories = categoriesRes.results;
      const allProducts = productsRes.results;

      // 遍历每个分类，匹配对应的产品
      this.categoriesWithProducts = categories.map(category => ({
        category: category,
        products: allProducts.filter(product => product.parentcatid === category.id)
      }));

      // 可选：过滤掉没有产品的分类
      this.categoriesWithProducts = this.categoriesWithProducts.filter(item => item.products.length > 0);
    });
  }
}

备选方案：逐个请求分类产品（如果API不支持全部产品） #

如果必须按分类单独请求产品，用forkJoin并行发起所有分类的产品请求，避免串行请求拖慢页面。

组件代码

import { Component, OnInit } from '@angular/core';
import { ProductsService } from '../services/products.service';
import { Products } from '../models/Products';
import { forkJoin } from 'rxjs';

interface CategoryWithProducts {
  category: { id: string; name: string };
  products: Products[];
}

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

  constructor(private productsService: ProductsService) { }

  ngOnInit(): void {
    this.productsService.getCategories().subscribe(categoriesRes => {
      const categories = categoriesRes.results;

      // 为每个分类创建产品请求
      const productRequests = categories.map(category => 
        this.productsService.getProductsByCategory(category.id)
      );

      // 并行执行所有请求
      forkJoin(productRequests).subscribe(productsResponses => {
        this.categoriesWithProducts = categories.map((category, index) => ({
          category: category,
          products: productsResponses[index].results
        }));
      });
    });
  }
}

第三步：模板渲染（匹配你的布局需求） #

现在你可以在模板里遍历categoriesWithProducts，用折叠面板展示每个分类下的产品：

<!-- 示例用Angular Material折叠面板，也可以换成自定义HTML结构 -->
<mat-accordion>
  <mat-expansion-panel *ngFor="let item of categoriesWithProducts">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ item.category.name }}
      </mat-panel-title>
      <mat-panel-description>
        {{ item.products.length }} 个产品
      </mat-panel-description>
    </mat-expansion-panel-header>

    <!-- 产品列表展示 -->
    <div class="product-grid">
      <div class="product-card" *ngFor="let product of item.products">
        <img [src]="product.mainphoto" alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.description | slice:0:100 }}...</p>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>

关键提示 #

• 优先选前端分组：减少HTTP请求数，提升页面加载速度，尤其是分类较多的时候。
• 类型定义：给分类和关联后的对象添加接口，让代码更清晰，还能获得TypeScript的类型提示。
• 错误处理：记得在subscribe里添加error回调，避免请求失败时页面崩溃。

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