How fetch data using foreign key in angular

Question

I was trying to implement Angular with Meteor and implemented that successfully. I was trying to get the data from my collections in this way. This is the code I used it to render my data in table

<ng-container *ngFor="let product of products;let i=index">
          <tr >
              <td>{{ i+1}}</td>
              <td>{{product.product_name}}</td>
              <td >{{product.product_category_id 
                  | fetch_product_category}}</td> // Approach 1
              <td >{{getProductCateogry(product.product_category_id)}} 
              </td> // Approach 2
              <td>{{product.product_brand}}</td>
              <td>{{product.created_at | date}}</td>
            <tr/>
 </ng-container>

Getting the data in Product Name And Brand but not in Product category Id. Product Category is a different collection has category Name in it. For Getting Data in Product Category I used these approaches Approach 1 - Angular Pipe ( I have used this in Angular) This is the pipe class I have created

 @Pipe({
      name: 'fetch_product_category'
     })
  export class FetchProductCategory implements PipeTransform {
     private productCategory: any;

    transform(catId: string): string {
    var productCatListingSubs = 

MeteorObservable.subscribe('fetch_product_category_based_on_categoryid',
  catId).subscribe( => {
        var productCategory = 
        ProductCategory.find({"product_category_id":catId}).fetch();
         console.log("Products Category  :",this.productCategory); // Getting Data Here
      });
        console.log("Products Category  :",this.productCategory); // Data not returned here
        return this.productCategory;  
    }
  }

Approach 2 : Fetching data based on Subscription

getProductSubcategory(catId){
   var name;
   console.log("Products Category"catId);
   this.productCatListingSubs = MeteorObservable.subscribe('fetch_product_category_based_on_categoryid',catId).subscribe( => {
      var productCategory = ProductCategory.find({"product_category_id":catId}).fetch();
       console.log("Products Category",productCategory);
       name = productCategory[0].product_category_name;
       console.log("name  :",name); 
     });
     return name;
 }

In Second Approach, data is there but there is infinite loop in console for this. I am using [email protected] and [email protected] This is the issue for long time now & not able to resolve this, Any help would be greatly appreciated.

Answer 1

Calling a function in any angular binding or ngIf pretty much always causes an infinite loop as anything that triggers change detection causes the function to be called again. This usually causes slowdown and a lot of latency for your app and should be avoided always.

For your scenario, when your products array is populated, I would either 1. Loop through products, lookup the foreign key and add a property to products (or clone it to a “display” array) 2. Loop through products and generate a lookup array linked with the foreign key. You can display this array to get your product category.

I would try to avoid having any subscription find call from within the ngfor for performance reasons.

Good luck