Question

我有以下情况。我有一个根据颜色，尺寸和价格有多个子产品的产品。我可以调用没有其变体的产品，也可以根据父级来调用产品变体。在ngFor从产品数组返回我一个产品之后，如何从ngFor调用变体，因此我可以为该单个产品加载变体。我的文件看起来像这样。

component.ts

export class ProductsComponent implements OnInit {
  products: Observable<Product[]>;
  variants: Product[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit() {
    this.products = this.productService.getProducts();
  }

  loadVariantsForProduct(product: Product) {
    console.log("I need to load product variants.");
    //     this.productService.getProductVariants(product.productVariantIds).subscribe((    res) => {
    //   this.variants = res;
    // });
  }

}

component.html

<mat-card *ngFor="let product of products | async;" class="example-card">
  {{ loadVariantsForProduct(product) }}
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{product.name}}</mat-card-title>
  </mat-card-header>
  <img mat-card-image src="{{product.productFiles[0].fileUrl}}" alt="    {{product.productFiles[0].name}}">
  <mat-card-content>
    <p>
      {{product.description}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button routerLink="/products/{{product.id}}">Edit</button>
    <button mat-button color="warn">Delete</button>
  </mat-card-actions>
</mat-card>

service.ts

getProducts(): Observable<Product[]> {
    return this.http.get(`${environment.apiUrl}/product/get-products`)
      .pipe(map((res: any) => deserialize<Product[]>(Product, res)));
  }

  getProductVariants(ids: any[]) {
    let params = new HttpParams();
    params = params.append('ids', JSON.stringify(ids).replace("[",     "").replace("]", ""));
    return this.http.get(`${environment.apiUrl}/product/get-product-variants`, {params: params})
      .pipe(map((res: any) => deserialize<Product[]>(Product, res)));
  }

Console.log显示了我的字符串太多次了。。。所以请求被发送了很多次，服务器也被淹没了。

如何在每次迭代时都从ngFor循环调用rest服务而不进行泛洪？

0 个答案: