Angular Rxjs 如何使用行为主题进行分页

Question

I'm building a filtration for products list using categories ids and doing this by using the RXJS operator BehaviorSubject .

My problem is I can't infinite scroll with Behavior Subject as I can't get the previous array of data ( products ) as obviously always get the latest data I update with.

My Service:

private productsSource = new BehaviorSubject<Product[]>(null);
public products$: Observable<Product[]> = this.productsSource.asObservable();

async getProductsByCategory(category: string, page: string = '1'): Promise<void> {
  const products = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  })
    .toPromise();

  this.productsSource.next(products);
}

My loadMore ( Pagination ):

async loadData(event) {
 // what next?
}

Answer 1

Change this.productsSource.next(products); to:

this.products.next({
   previous: this.products.value.current
   current: products
});

And the definition:

private productsSource = new BehaviorSubject<any>(null);
// You could also make a type for that like:
// { previous: Product[], current: Product[] }

And then you always have the previous one and the current one.

If you want to achive an infinite scroll, I would suggest you to change push all values into a dedicated array like:

products$.subscribe((value) => {
   this.someProductsArray = [...this.someProductsArray, ...value];
});

Answer 2

I found a way to my situation that perfect fit,

The code for it:

My service: Just returning a products list as a promise from the getProductsByCategory method:

/**
 * @name getProductsByCategory
 * @param category 
 * @param page 
 */
async getProductsByCategory(category: string, page: string = '1'): Promise<Product[]> {

  // getting products
  const products = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      // per_page: '6',
      not_tags: 'component'
    }
  })
    .toPromise();

  return products;
}

Then create a new method that returns the productsSource :

filteringProduct() {
  return this.productSource;
}

On Component : in ngOnInit giving it an initial value:

async ngOnInit() {
  // get the category id
  const id = this.route.snapshot.paramMap.get('id');
  this.categoriesIds = id;

  // get gategory and its sub categories Or Prodicts by category id
  [this.category, this.subCatergories] = await Promise.all([
    this.wooService.getCategoryById(id),
    this.wooService.getSubCategories(id)]);

  // setting products
  this.wooService
    .filteringProduct()
    .next(
      await this.wooService.getProductsByCategory(this.categoriesIds)
    );

  this.wooService.products$
  .pipe(
    takeUntil(this.unsubscribe)
  )
  .subscribe(data => this.products = data);

}

My loadMore Methode:

async loadData(event) {

  // next page number
  this.currentPage++;

  // const id = this.category.id.toString();

  // next page content
  const nextPage = await this.wooService.getProductsByCategory(
    this.categoriesIds,
    this.currentPage.toString()
  );

  // concat all together
  this.products = this.products.concat(nextPage);

  // compelete the loading
  event.target.complete();

  // checking if all data loaded from the server
  if (nextPage.length === 0) {
    this.infinite = false;
  }

}

Answer 3

You can use count() operator to store the page number and just a normal subject will do the job.

currentPage=Subject();
getProduct=(page)=>
this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  })


data=loadMore.pipe(
  count(),
  mergeMap(page=>getProduct(page)),
     scan((acc,curr)=>{
         return acc.concat(cur.res)
     },[])
  )