фильтрация наблюдаемого в Angular

Question

в моем приложении у меня есть задача отфильтровать наблюдаемое. У меня есть множество продуктов, поступающих с моего сервера. Когда пользователь нажимает кнопку, генерируется 7 случайных чисел, которые сопоставляются с массивом продуктов, и 7 продуктов отфильтровываются.

Код из моего класса ProductListComponent:

numbers: number[] = [];
filteredproducts: IProduct[] = [];

constructor(private productservice: ProductService) {

}

ngOnInit(): void {

}

getRandomProducts(): void {
let size: number;
this.filteredproducts = [];
this.productservice.getallproducts()
  .subscribe(
    (products: IProduct[]) => {
      size = products.length;
      this.getrandomnumbers(size);
      console.log(this.numbers);
      products.map(
        product => {

          for (let i = 0; i < this.numbers.length; i++) {

            if (Product.Id == this.numbers[i]) {
              this.filteredproducts.push(product);
              console.log("product added");

            }
          }
        }
      )
      //this.filteredproducts = products
    }

  );
}

getrandomnumbers(size: number): void {

  for (let i = 0; i < 7; i++) {
   this.numbers[i] = Math.floor(Math.random() * size + 1)
  }

}

Код из моего класса ProductService:

export class ProductService {

private URL = 'http://localhost:3000/products';

constructor(private http: HttpClient) { }

getallproducts(): Observable<IProduct[]> {
 return this.http.get<IProduct[]>(this.URL)
}

Все работает нормально, и массив фильтруется. Но могу ли я сделать что-то, чтобы улучшить это? Код для функции getRandomProducts кажется мне немного длинным. После этого я хочу, чтобы пользователь мог go перейти на другую страницу, но сохранить продукты в списке, когда он вернется на страницу списка. Это еще не совсем работает. Как бы вы решили это? Я не хочу работать с локальным кешем браузера. Спасибо за ваши ответы.

Answer 1

Вы можете удалить this.filteredProducts из функции, поскольку она уже имеет нулевую длину в самом классе.

getRandomProducts() {
    this.productservice.getallproducts().pipe(take(1)) // emits only one value
     .subscribe(productsArray => {
        const size = productsArray.length; // size can be a const, does not change
        this.getRandomNumbers(size);

        this.filteredproducts = productsArray.filter(
          product => product.id === this.numbers.find(number => number === product.id) // checking if the product.id does exist in the numbers array
        );
      });
  }