可观察的 rxjs 过滤器

Question

在我的项目中，我想在每个产品页面中创建某种“推荐产品”， 但无法让我的函数过滤可观察。

我尝试过以不同的方式使用 .pipe(filter())，但没有用。

基本上该功能应该过滤具有相同type和id的产品，并将它们显示在适当的产品页面中，但在订阅我的所有产品后几乎卡住了（在下面标记）。

非常感谢！

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import  Product  from '../interfaces/product';
import { map, filter} from 'rxjs/operators';
import { Observable } from 'rxjs';

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


  constructor(private productService: ProductService, private route: Router, private actRoute: ActivatedRoute) { }

  ngOnInit() {
    this.findRecommendedProducts(this.product)
  };

//From ProductService:
//   getProducts(){
//    return this.http.get(`${this.uri}`);
//    }
  findRecommendedProducts(currectProduct: Product){
    this.productService.getProducts().subscribe((data: Product[]) => {
      this.allProducts = data;
      console.log(this.allProducts)
      this.recommandedProducts = this.allProducts.filter(otherProduct => 
      otherProduct.type == currectProduct.type && otherProduct.id == currectProduct.id)
      console.log(this.recommandedProducts);
    });      
  };



}

Answer 1

rxjs 中的过滤器与Array.filter 不同。在 rxjs 中，过滤器用于发出通过所提供条件的值。所以如果你使用过滤器，根据条件，observable 要么发出你的数据，要么什么也不返回。

相反，您需要的是pipe(map) 以及Array.filter。此外，正如@jzzfs 指出的那样，您的错误显示currentProduct 可能是undefined，因此您可以在findRecommendedProducts 函数中传递一个默认值。

试试下面的代码。

findRecommendedProducts(currectProduct: Product = {} as Product) {
    this.productService.getProducts()
    .pipe(
        map((products: Product[]) => products.filter(product => product.type == currectProduct.type && product.id == currectProduct.id))
    )
    .subscribe((data: Product[]) => {
        this.recommandedProducts = data;
    });      
};

现在您订阅的数据应该直接返回recommendedProducts。

Answer 2

看起来传递给findRecommendedProducts 的currectProduct 是undefined，因为记录的this.allProducts 确实包含值。

话虽如此，请注意，当您定义product: Product 时，您只定义了它的类型，但还没有对其进行初始化。因此默认值是undefined——如果我没记错的话。

因此，例如将product: Product 更改为product: Product = {};，或者在构造函数或ngInit 中将值传递给它。