如何隨機化（洗牌）一個有角度的Observable？

我正在使用 angular 和 firebase。我在 firebase 中有 170 種產品。當我呼叫 firebase 時，我得到了存盤在 products$ 中的產品的 Observable。

問題：我想在它們之間混洗所有產品。這樣當我重繪 網頁時，每次的產品串列都會不同。我嘗試了陣列方法，但它不起作用，因為 products$ 是一個 Observable 而不是陣列！我能做什么？提前致謝！

product.component.ts
import { Product } from './../models/product';
import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { ActivatedRoute } from '@angular/router';
import { ProductsService } from './../products.service';
import { map, switchMap } from 'rxjs/operators';
import { Observable, of, Subscription } from 'rxjs';
import { Component } from '@angular/core';

@Component({
  selector: 'products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
})
export class ProductsComponent {
  products$: Observable<Product[]>;
 
  cart$: Observable<Cart>;

  constructor(
    private productsService: ProductsService,
    private cartService: CartService,
    private route: ActivatedRoute
  ) {
    this.getProducts();
    this.getCart();
  }

  private getProducts(): void {
    this.products$ = this.route.queryParamMap.pipe(
      switchMap((params) => {
        if (!params) return of(null);

        let category = params.get('category');
        return this.applyFilter(category);
      })
    );
  }

  private applyFilter(category: string): Observable<Product[]> {
    if (!category)
      return this.productsService
        .getAll()
        .snapshotChanges()
        .pipe(
          map((sps) => sps.map((sp) => ({ key: sp.key, ...sp.payload.val() })))
        );

    return this.productsService
      .getByCategory(category)
      .snapshotChanges()
      .pipe(
        map((sps) => sps.map((sp) => ({ key: sp.key, ...sp.payload.val() })))
      );
  }

  private async getCart() {
    this.cart$ = (await this.cartService.getCart())
      .snapshotChanges()
      .pipe(
        map(
          (sc) =>
            new Cart(
              sc.key,
              sc.payload.val().cartLines,
              sc.payload.val().createdOn
            )
        )
      );
  }
}

product.component.html
<div >
    <div >
        <products-filter></products-filter>
    </div>
    <div >
        <div *ngIf="cart$ | async as cart" >
            <ng-container *ngFor="let product of products$ | async; let i = index">
                <div >
                    <product-card [product]="product" [cart]="cart"></product-card>
                    <div *ngIf="(i   1) % 2 === 0" ></div>
                </div>
            </ng-container>
        </div>
        <div *ngIf="(products$ | async)?.length === 0"  role="alert">
        <h1>Keine Produkte gefunden!</h1>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

肯定有更好/更短的方法來做到這一點，但您可以嘗試使用“BehaviourSubject”并將其傳遞給您的陣列，按您的喜好排序（在這種情況下是隨機的）。

你可以嘗試這樣的事情：

1. 將此添加到您的 product.component.ts 中：

// product.component.ts

import { ActivatedRoute } from '@angular/router';
import { Component } from '@angular/core';
import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

import { Product } from './../models/product';
import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { ProductsService } from './../products.service';

@Component({
  selector: 'products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css'],
})
export class ProductsComponent {
  products$: Observable<Product[]>;
  randomProductsSource = new BehaviorSubject<Product[] | null>(null);
  randomProducts$ = this.randomProductsSource.asObservable();
  cart$: Observable<Cart>;

  constructor(
    private productsService: ProductsService,
    private cartService: CartService,
    private route: ActivatedRoute
  ) {
    this.getProducts();
    this.getCart();

    this.products$.subscribe( _products => {
      if ( _products && products?.length > 0) { 
         this.randomizeArray(_products);
         this.setRandomProducts(_products);
      }
    })

  }

  private getProducts(): void {
    this.products$ = this.route.queryParamMap.pipe(
      switchMap((params) => {
        if (!params) return of(null);

        let category = params.get('category');
        return this.applyFilter(category);
      })
    );
  }

  private applyFilter(category: string): Observable<Product[]> {
    if (!category)
      return this.productsService
        .getAll()
        .snapshotChanges()
        .pipe(
          map((sps) => sps.map((sp) => ({ key: sp.key, ...sp.payload.val() })))
        );

    return this.productsService
      .getByCategory(category)
      .snapshotChanges()
      .pipe(
        map((sps) => sps.map((sp) => ({ key: sp.key, ...sp.payload.val() })))
      );
  }

  private async getCart() {
    this.cart$ = (await this.cartService.getCart())
      .snapshotChanges()
      .pipe(
        map(
          (sc) =>
            new Cart(
              sc.key,
              sc.payload.val().cartLines,
              sc.payload.val().createdOn
            )
        )
      );
  }

  private setRandomProducts(data: Product[] | null) {
    this.randomProductsSource.next(data);
  }

  private randomizeArray(arrayProducts) {
     for (let i = arrayProducts.length-1; i > 0; i--) {
        const j = Math.floor( Math.random()*(i 1) );
        [arrayProducts[i], arrayProducts[j]] = [arrayProducts[j], arrayProducts[i]];
     }
  }


}

2. 然后更改您的 product.component.html，只需將 products$ 更改為 randomProducts$：

<div *ngIf="(randomProducts$ | async)?.length === 0"  role="alert">

我從這里得到了隨機方法的想法

標籤：有角的 角度可观察

上一篇：ag-Grid：如何對ICellRendererAngularComp進行單元測驗

下一篇：拼接方法僅一次