온라인 상점 프로젝트 (Angular)를 설정하고 각 제품 페이지에서 일종의 "추천"영역을 수행하려고했습니다.
처음에는 모든 제품을 구독 한 다음 일치하는 유형과 ID를 찾기 위해 살펴보고 싶었습니다.
테스트를 위해 MongoDB에서 18 개의 제품 (6 개의 다른 제품)을 만들었지 만 (같은 유형 및 ID를 가진 동일한 제품의 3 개 제품) 불행히도이 오류가 발생하여 이유를 알 수 없습니다.
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;
};
}아래와 같이 코드를 이동해보십시오.
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)
});
};
}
이유:
을 사용하여 observable을 듣고 this.productService.getProducts()있으므로 this.allProducts비동기 적으로 채워 지므로에서 .filter작동하지 않습니다 undefined. 로 이동 subscribe그래서 지금 당신이 한 번, 블록 this.allProducts, 당신은 사용할 수 있습니다 .filter().
메이크업은 확실 this.product하다 defined주어진 코드에서 초기화 선언하지되었습니다.
this.recommandedProducts = this.findRecommandedProducts(this.product)또한 작동하지 않습니다. 작업 방법에 대해 자세히 읽어보십시오 observable(이 작업 은 비동기 작업이므로 함수를 그런 방식으로 작성해야합니다).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다