找不到未定义的属性“过滤器”[重复]

Question

我已经建立了我的在线商店项目 (Angular) 并尝试在每个产品页面中创建某种“推荐”区域。

起初我想订阅我所有的产品，然后查看它们以找到匹配的类型和 ID。

只是为了测试，我在我的 MongoDB 中创建了 18 个产品（6 个不同的产品）（3 个具有相同类型和 id 的相同产品的产品），但不幸收到此错误并且无法弄清楚原因：

无法读取未定义的属性“过滤器” 在 ProductComponent.findRecommandedProducts

export class ProductComponent implements OnInit {

  recommandedProducts: Product[];
  allProducts: Product[];
  product: Product;


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

  ngOnInit() {
    this.recommandedProducts = this.findRecommandedProducts(this.product)
  };

  findRecommandedProducts(currectProduct: Product){
    this.productService.getProducts().subscribe((data: Product[]) => {
      this.allProducts = data;
    });
//productService.getProducts() returns all of my products in JSON format to localhost//

    let recommandedProducts = this.allProducts.filter(otherProduct => 
      otherProduct.type == currectProduct.type && otherProduct.id == currectProduct.id) 

      // otherProduct.id == currectProduct.id becacuse i have 3 identical items of each item. //
      
      return recommandedProducts;
  };

}

Answer 1

尝试如下移动代码：

export class ProductComponent implements OnInit {

  recommandedProducts: Product[];
  allProducts: Product[];
  product: Product = {type: "something" , id: 1};


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


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

  findRecommandedProducts(currectProduct: Product){
    this.productService.getProducts().subscribe((data: Product[]) => {
      this.allProducts = data;
      this.recommandedProducts = this.allProducts.filter(otherProduct => 
      otherProduct.type == currectProduct.type && otherProduct.id == currectProduct.id) 
    });  
  };

}

原因：

您正在使用 this.productService.getProducts() 收听 observable，因此您的 this.allProducts 将被异步填充，因此 .filter 将无法在 undefined 上运行。将它移动到 subscribe 块，所以现在一旦你有了 this.allProducts ，你就可以使用 .filter()。

1. 确保 this.product 是 defined ，在给定的代码中它已被声明且未初始化。

2. this.recommandedProducts = this.findRecommandedProducts(this.product) 也不起作用。请阅读更多关于使用observable 的方式（这些是异步操作，因此您的函数必须以这种方式编写）