Variable data not retained to bind in HTML even after assigning data to it inside a subscribe() function

Question

I have below app-product.ts code written as below:

@Component({
   selector: 'app-product',
   template: `
    <div>
      <h2>{{products.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{products.prod_desc}}</div>
    </div>`
 })

export class ProductComponent {

   products:any = [];

   constructor(public rest: RestService){ this.getProducts() }

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}) => {
     console.log(data); // data is printing in console
      this.products = data; // tried keeping debugger here 
   });
}

In the above code I am able to print the data in console but the variable products is not accessible in my template. I also tried to keep a debugger at the point and I tried to print the products but it was showing as undefined every time.

Below is my angular service file for consuming REST API using Http Client as below:

@Injectable({
  providedIn: 'root'
})

export class CarApiService {

  getProducts(): Observable<any> {
    return this.http.get(endpoint + 'products').pipe(
    map(this.extractData));
  }
}

I also tried to analyse if there is any callback issues in the code but could not figure what is the real cause of this problem.

I also tried looking into few threads like: component variables inside a RxJS subscribe() function are undefined but could not find any help. Can anyone please help me out?

Answer 1

Since the service was in other module i had to create single sharing tree for access that return values. So the code must be placed inside the export shared module block as below:

static forRoot(): ModuleWithProviders {
return {
  ngModule: SharedModule
};

}

Answer 2

Your are trying to use product in template (*ngIf="product") while the data is inside products variable.

and, you should call getProducts() function to fetch the values inside your array variable.

Import OnInit Interface and call the fucntion:

export class ProductComponent implements OnInit {

   products:any = [];

   constructor(public rest: RestService){}

   ngOnInit() {
          this.getProducts();
   }
   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}) => {
     console.log(data); // data is printing in console
      this.products = data; // tried keeping debugger here 
   });
}

update due comment

if you want show array in your template you have to iterate over the array:

template: `
    <div *ngFor='let product of products'>
      <h2>{{product.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{product.prod_desc}}</div>
    </div>`

Answer 3

@Component({
   selector: 'app-product',
   template: `
   <div *ngFor='let product of products'>
      <h2>{{product.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{product.prod_desc}}</div>
   </div>`
 })

export class ProductComponent {

   products:{}[] = [];

   constructor(public rest: RestService){ this.getProducts() }

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}[]) => {
     this.products = data;
     console.log(this.products); // this should not be undifind
   });
}

otherwise check your spelling