I can´t show service response in angular component

Question

I try to show a data in an angular component from a service, all the process from service to component is ok, but when i use the variable in html it not show the result.

I used this Metronic Template: https://preview.keenthemes.com/metronic/angular/demo1/ Metronic Version:

"name": "metronic-angular-demo1",
"version": "7.1.0",

Angular version:

"@angular/cli": "~10.0.4",

I have the following angular component:

import { Component, OnInit } from '@angular/core';
import { GeneralResult } from 'src/app/models/general/general.model';
import { PointsService } from 'src/app/services/points/points.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  data: any;

  constructor(private service: PointsService) {

  }

  ngOnInit(): void {
    this.data = this.service.getPointConfig().subscribe((result: GeneralResult) => {
      this.data = result.data;
    });
  }

}

This is the service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { GeneralResult, ResultModel } from 'src/app/models/general/general.model';
import * as env from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class PointsService {

  constructor(private http: HttpClient) { }

  getPointConfig(): Observable<GeneralResult> {
    return this.http.post<GeneralResult>(env.serviceRoute.GET_POINTS_CONFIG, null);
  }
}

This is the HTML component

<div *ngFor="let item of data; let i of index" class="row row-container-item-list">
                <div class="col-3">
                    {{ item.codePoint }}
                </div>
      
                <div class="col-3">
                    {{ item.namePoint }}
                </div>
               
                <div class="col-3">
                    {{ item.quantityPoint }}
                </div>


            </div>

I did add a button with a empty function in component.ts, when i click on the button, data works ` go() { } ` — Carlos Andrés Montoya Cardona, Feb 09 '21 at 06:39
can you share your resposne here or your GeneralResult modal and then only able to answer your question clearly — Msk Satheesh, Feb 09 '21 at 06:42

score 1 · Accepted Answer · answered Feb 09 '21 at 06:15

add *ngIf="data" in parent tag. try like this.

<div *ngIf="data">
  <div *ngFor="let item of data; let i of index" class="row row-container-item-list">
    <div class="col-3">
        {{ item.codePoint }}
    </div>
  
    <div class="col-3">
        {{ item.namePoint }}
    </div>
   
    <div class="col-3">
        {{ item.quantityPoint }}
    </div>
    
  </div>
</div>

OR

<ng-template [ngIf]="data">
  <div *ngFor="let item of data; let i of index" class="row row-container-item-list">
    <div class="col-3">
        {{ item.codePoint }}
    </div>
  
    <div class="col-3">
        {{ item.namePoint }}
    </div>
    
    <div class="col-3">
        {{ item.quantityPoint }}
    </div>
    
  </div>
</ng-template>

Let me know if this does not work.

score 0 · Answer 2 · answered Feb 09 '21 at 06:32

Trying a different variable to store the subscription. It might be conflicting with that.

data = [];
sub : any;
ngOnInit(): void {
    this.sub= this.service.getPointConfig().subscribe((result: GeneralResult) => {
      this.data = [...result.data];
    });
  }

Anant Gaur · Answer 3 · 2021-02-19T13:48:32.743

Only responding because someone else might come across this question like I did. I am guessing OP did fix their error.

I have used the exact same metronic services as OP. The data is not initialized which means angular will throw an error while rendering the template. 2 simple fixes, one given by Piyush in their answer.

Use NgIf which will observe data till it's received and then render the component. Adding this tag will fix the error

<div *ngIf="data">

Initialize the data before assigning the values. Has to be done either in the constructor or ngOnInit

this.data = { codePoint : "", namePoint : "", quantityPoint :"" }

Also, you assigned subscription to this.data, don't do that. You want to dispose of your subscriptions when done, otherwise you can have memory leaks over time.

Since I mentioned memoryleaks, initializing the data is preferable to using NgIf on a strictly performance based metric.

I can´t show service response in angular component

3 Answers3