如何使用ngFor Angular从服务器获取json数组中的随机对象

Question

我需要从 JSON 数组中获取一个随机对象，现在我在轮播中使用从 0 到 16 的管道切片。 我的产品是一一展示的，但我想随机展示。有人可以帮忙吗？？？

这是我的 JSON 文件：

{
"id": 40,
"name": "car",
"shortDetails": "Cars 2",
"description": "Cars 2",
"pictures": "cars2.png",
"newItem": true,
"category": "PREDEFINED_CAR",
"price": 33,
"sale": false,
"discount": null,
"salePrice": null,
"productType": "CAR",
"sku": "",
"stock": 10,
"subCategory": {
  "id": 10,
  "name": "Cars",
  "translationKey": "Cars",
  "relations": null
}

HTML code:

<section class="section-b-space p-t-0">
    <div class="container">
        <div class="row">
            <div class="col">
                <owl-carousel-o class="product-m no-arrow" [options]="ProductSliderConfig">
                    <ng-container *ngFor="let product of products$ | async | slice:0:16">
                        <ng-template carouselSlide>
                            <div class="product-box">
                                <app-product-box
                                        [product]="product"
                                        [currency]="productsService?.Currency"
                                        [thumbnail]="true"
                                        [cartModal]="true">
                                </app-product-box>
                            </div>
                        </ng-template>
                    </ng-container>
                </owl-carousel-o>
            </div>
        </div>
    </div>
</section>

TypeScript code:

constructor(private _store: Store<AppState>) {
    this.products$ = this._store.pipe(select(selectProductList));
}
products$;

Answer 1

只需打乱元素数组。见this SO

produtsSuffle$=this.product$.pipe(
    map((res: any[]) =>
      res
        .map(x => ({ value: x, order: Math.random() }))
        .sort((a, b) => a.order - b.order)
        .map(x => x.value)
    )
  );

更新 如果我们对 suffle 有问题，总是可以使用“缓存”。它只是有一个变量“数据”。这个想法是您返回 suffle 数组或数据。在路上

//in pseudo code
//return (!data)?the suffle array:of(data)

data:any[]=null;

produtsSuffle$=!data?this.product$.pipe(
    map((res: any[]) =>
      res
        .map(x => ({ value: x, order: Math.random() }))
        .sort((a, b) => a.order - b.order)
        .map(x => x.value)
    ),
    tap(res=>this.data=res)
  ):of(data)

或订阅 productSuffle 并使用数据

produtsSuffle$.subscribe(res=>{
   this.data=res;
})

如果我们有一个服务“serviceState”，我们可以这样做

get data(){
   return this.serviceState.data;
}
set data(){
   this.serviceState.data=data;
}