单击时列表不会更新，仅在刷新页面时

Question

我有这个基于 JSON 本地数据的简单应用程序。基本上是一个产品列表和一个类别。目标是按类别过滤产品，我已经设法做到了，但有些奇怪和错误，因为产品列表不会在点击类别列表时更新，但是我刷新页面并离开按我的意愿过滤，产品 ara 更新，对应于过滤器。我不知道帽子是造成这种情况的原因，经过无数次arrenots后，我最终来到这里询问社区......代码：

提供json数据的服务：

export class ProductService {
  constructor(private htttp: HttpClient) {}

  getAllProducts(): Observable<Product[]> {
    return this.htttp.get<Product[]>("assets/products.json").pipe(
      map((p) => {
        let result = p[0]["products"];
        return result;
      })
    );
  }
  getCategories(): Observable<any[]> {
    return this.htttp.get<any[]>("assets/categories.json").pipe(
      map((p) => {
        let result = p[0]["categories"];
        return result;
      })
    );
  }
}

保存和处理所有逻辑的 basw 组件：

export class BaseShopComponent implements OnInit {
  categories: any[];
  products: Product[];
  category: string;
  filteredProducts: Product[] = [];
  constructor(
    private productService: ProductService,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe((params) => {
      this.category = params["categories"];
      console.log(this.category);
    });

    this.productService.getAllProducts().subscribe((data: Product[]) => {
      this.products = data;
      this.filteredProducts = this.category
        ? this.products.filter(
            (p) => p.category.toLowerCase() === this.category.toLowerCase()
          )
        : this.products;
    });

    this.getCategories();
  }

  getCategories() {
    this.productService.getCategories().subscribe((data: any[]) => {
      this.categories = data;
    });
  }
}

数据传递给其他组件的方式：

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <app-left-shop></app-left-shop>
    </div>
    <div class="col-md-6">
      <app-content-shop
        [products]="products"
        [filteredProducts]="filteredProducts"
      ></app-content-shop>
    </div>
    <div class="col-md-3">
      <app-right-shop
        [categories]="categories"
        [category]="category"
      ></app-right-shop>
    </div>
  </div>
</div>

以及接收器/渲染器 TS

export class RightShopComponent implements OnInit {
@Input() categories: any[];
@Input() category:string;

还有 HTML

<ul class="list-group">
    <a class="list-group-item"  
    *ngFor="let c of categories"
    [class.active]="c.name===category"
    routerLink="/shop"
    [queryParams]="{categories:c.name}">
        {{c.name}}
    </a>
</ul>

TS

export class ContentShopComponent implements OnInit {
  @Input() products: Product[];
  @Input() filteredProducts: Product[] = [];
}

最后，Html：

<ul>
  <li *ngFor="let p of filteredProducts">
    {{p.name}}
  </li>
</ul>

我承认，我迷路了。我无法弄清楚这种不良行为的原因。有人可以帮忙»

Answer 1

在您的 BaseShopComponent 中，您正在获取 queryParams 和类别列表。此外，要根据类别过滤产品，您需要在 queryParams 更改时调用产品获取方法。目前你在onInit 中执行它只会执行一次。

将 fetchProducts 编写为单独的函数，并在 queryParams 更改时调用

  onInit(){
     this.route.queryParams.subscribe((params) => {
       if(params.categories){
         this.category = params["categories"];
         this.fetchProducts();               <== Refresh When Category Changes 
         console.log(this.category);
       }
     });
     this.fetchProducts();  <== Initial Call
     this.getCategories();
   }


    fetchProducts() {
       this.productService.getAllProducts().subscribe((data: Product[]) => {
        this.products = data;
        this.filteredProducts = this.category
          ? data.filter(
            (p) => p.category.toLowerCase() === this.category.toLowerCase()
           )
         : data;
      });
    }