Angular组件向Service传值异常：商品筛选索引传递后为undefined

你的核心问题集中在三点：

1. 初始化时机错误：ProductsGridComponent在构造函数中立即调用getAllProducts()，此时ProductgridService的index还未被设置（默认undefined），只会执行else分支获取全部商品。
2. 未触发重新请求：在CategoryFilterComponent更新service的index后，没有重新调用getAllProducts()拉取对应分类的商品数据。
3. 数据更新无响应：直接操作数组allProducts并赋值给组件变量，Angular无法检测数组内容变化导致视图不更新；同时每次push数据会残留旧数据。

以下是分模块的代码修改方案：

1. 重构ProductgridService（响应式数据管理） #

使用BehaviorSubject实现数据的响应式推送，优化分类请求逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductgridService {
  // 用BehaviorSubject存储商品数据，初始值为空数组
  private productsSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露可观察对象，供组件订阅获取实时数据
  public products$: Observable<any[]> = this.productsSubject.asObservable();
  
  index: number = -1; // 初始值设为-1，对应全部商品

  constructor(private http: HttpClient) { }

  getAllProducts() {
    let url: string;
    // 根据index匹配对应分类的请求地址
    switch(this.index) {
      case 0:
        url = 'https://dummyjson.com/products/category/smartphones';
        break;
      case 1:
        url = 'https://dummyjson.com/products/category/laptops';
        break;
      default:
        url = 'https://dummyjson.com/products';
    }

    this.http.get(url).subscribe({
      next: (data: any) => {
        // 替换数据而非push，避免旧数据残留
        this.productsSubject.next(data.products);
      },
      error: (err) => {
        console.error('商品请求失败:', err);
      }
    });
  }
}

2. 修改CategoryFilterComponent（更新索引后触发请求） #

切换复选框时更新service的index，并立即调用getAllProducts()获取对应分类数据：

import { Component, OnInit } from '@angular/core';
import { CategoryfilterService } from '../categoryfilter.service';
import { ProductgridService } from '../productgrid.service';

@Component({
  selector: 'app-category-filter',
  templateUrl: './category-filter.component.html',
  styleUrls: ['./category-filter.component.scss']
})
export class CategoryFilterComponent implements OnInit {
  selectedIndex: number = -1; // 初始值-1，无选中状态
  categoriesList: any[] = [];

  constructor(
    private categoryfilter: CategoryfilterService, 
    private productList: ProductgridService
  ) {
    this.categoryfilter.getCategories();
    this.categoriesList = this.categoryfilter.categoriesNames;
  }

  ngOnInit(): void { }

  changeSelection(event: any, index: number) {
    // 切换选中状态：勾选时设为当前index，取消时重置为-1
    this.selectedIndex = event.target.checked ? index : -1;
    this.productList.index = this.selectedIndex;
    // 更新索引后立即请求对应分类数据
    this.productList.getAllProducts();
  }
}

3. 修改ProductsGridComponent（订阅响应式数据） #

不再直接赋值数组，改为订阅service的products$获取实时数据：

import { Component, OnInit } from '@angular/core';
import { ProductgridService } from '../productgrid.service';

@Component({
  selector: 'app-products-grid',
  templateUrl: './products-grid.component.html',
  styleUrls: ['./products-grid.component.scss']
})
export class ProductsGridComponent implements OnInit {
  allProductList: any[] = [];

  constructor(private productList: ProductgridService) { }

  ngOnInit(): void {
    // 订阅商品数据变化，实时更新组件变量
    this.productList.products$.subscribe(products => {
      this.allProductList = products;
    });
    // 初始化时获取一次全部商品
    this.productList.getAllProducts();
  }
}

4. 修改ProductsGridHTML（适配新数据结构） #

现在allProductList直接是商品数组，无需再取allProductList[0]?.products：

<div class="col" *ngFor="let product of allProductList; let i = index">
  <img class="img-product" [src]="product.thumbnail" alt="{{ product.title }}">
  <div class="dc">
    <p> -{{ product.discountPercentage }}% </p>
  </div>
  <p id="product-title">{{ product.title }}</p>
  <p id="product-description">{{ product.description }}.</p>
  <div class="product-price">
    <p> 
      <span id="price-dc">
        <span style="font-weight:bold;">{{ product.price }} </span> 
        <span>USD</span> 
      </span> 
      <span style="font-weight:bold;">{{ (product.price / (1 - product.discountPercentage/100)).toFixed(2) }} </span>
      <span>USD</span>
    </p>
  </div>
  <p class="product-details">Brand: <span style="font-weight:bold;">{{ product.brand }}</span></p>
  <p class="product-details">Category: <span style="font-weight:bold;">{{ product.category }}</span></p>
  <p class="product-details">In stock: <span style="font-weight:bold;">{{ product.stock }}</span></p>
  <span class="product-rating">
    <img class="img-star" src="assets/images/star-17.png" alt="star"> 
    <span style="color:#F4B000;"> {{ product.rating }} </span> 
    <span>({{ product.id }})</span> 
  </span>
  <button class="btn">ADD TO CART</button>
</div>

• 给CategoryfilterService的categoriesNames添加响应式处理，避免初始化时可能的空值问题。
• 可以将复选框替换为单选按钮，更符合“仅选中一个分类”的交互逻辑。
• 给HTTP请求添加加载状态提示，提升用户体验。

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