Как вызвать службу отдыха из цикла ngFor для каждой итерации без затопления?

Question

У меня следующий сценарий.У меня есть продукт, который имеет несколько субпродуктов в зависимости от цвета, размера и цены.Я могу называть Продукты без их вариантов, и я могу называть Варианты продуктов в соответствии с родителем.Как я могу вызвать Variants из ngFor, после того как ngFor вернет мне один продукт из массива products, чтобы я мог загрузить варианты для этого отдельного продукта.Мои файлы выглядят так.

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 показывает мою строку слишком много раз .... Так что запрос отправляется так много раз, и сервер загружается.