Наблюдаемый фильтр rx js - PullRequest
Новая
       8

Наблюдаемый фильтр rx js

1 голос
/ 29 марта 2020

В моем проекте я хотел создать своего рода «Рекомендуемые продукты» на каждой странице продукта, но у меня возникли проблемы с тем, чтобы моя функция фильтрации наблюдалась.

Я пытался использовать .pipe (filter () ) по-разному, но безрезультатно.

По существу, функция должна фильтровать продукты с одинаковыми типом и id и отображать их на соответствующей странице продукта, но в значительной степени застрял после подписки на все мои продукты (что отмечено ниже).

Многое оценено!

enter image description here

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);
    });      
  };



}

Ответы [ 2 ]

1 голос
/ 30 марта 2020

Фильтр в rx js отличается от Array.filter. В rx js фильтр используется для передачи значений, которые соответствуют предоставленному условию. Поэтому, если вы используете фильтр, основанный на условии, наблюдаемое будет либо излучать ваши данные, либо ничего не возвращать.

Вместо этого вам потребуется 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.

.
0 голосов
/ 30 марта 2020

Похоже, что currectProduct, переданный на findRecommendedProducts, равен undefined, поскольку зарегистрированные this.allProducts содержат значения.

С учетом сказанного обратите внимание, что когда вы определяете product: Product, вы Вы только определили его тип, но вы не инициализировали его. Поэтому значение по умолчанию undefined - если я правильно помню.

Поэтому измените product: Product на product: Product = {};, например, или передайте ему значение в конструкторе или в ngInit.

...