Angular - Get undefined from service

Question

logdetay.service.ts

import { Injectable } from '@angular/core';
import { Logdetay } from './logdetay.model';
import { HttpClient } from "@angular/common/http";

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

  formData:Logdetay={
    Message: null,
    CreateDate: null,
    LogType: null,
    Int: null


  };

  readonly rootUrl='https://localhost:44370/api';
  list : Logdetay[];
  constructor(private httpclient:HttpClient) { }

  postlogDetay(formData:Logdetay){
    return this.httpclient.post(this.rootUrl+'/Logtbs',formData);

  }
  refreshList()
  {
    this.httpclient.get(this.rootUrl + '/Logtbs')
    .toPromise()
    .then(res => this.list = res as Logdetay[]);   
  }
}

---

logdetay-liste.component.html

<table class="table table-hover">
    <tr *ngFor="let pd of service.list">
      <td >{{pd.Message}}</td>
      <td >{{pd.Logtype}}</td>

    </tr>
</table>

---

logdetay-liste.component.ts

import { Component, OnInit } from '@angular/core';
import { Logdetay } from 'src/app/paylas/logdetay.model';
import { LogdetayService } from 'src/app/paylas/logdetay.service';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-logdetay-liste',
  templateUrl: './logdetay-liste.component.html',
  styles: []
})
export class LogdetayListeComponent implements OnInit {


  constructor(private service : LogdetayService) {  }
  ngOnInit() {

     this.service.refreshList();



  }


}

---

Output: this.service.refreshList(); in logdetay-list.component.ts value comes undefined.

I am trying to get information via web API. I was able to do the insertion. How can I show the values ​​on the page?

Answer 1

Issue(s)

Issue 1:

As @Tonbul mentioned in the comment, you are accessing the service in the HTML component which it was a private variable.

<tr *ngFor="let pd of service.list">
  ...
</tr>

Issue 2:

You are accessing the list from LogdetayService which is private. By default, a variable without specifying any accessing type will be set to private.

export class LogdetayService {
    list : Logdetay[];

    ...
}

---

Solution(s)

Solution 1: Declare variables as public

1.1 Set service as public

logdetay-liste.component.ts

export class LogdetayListeComponent implements OnInit {
  constructor(public service : LogdetayService) {  }
}

1.2 Set list as public

logdetay.service.ts

export class LogdetayService {
    public list : Logdetay[];

    ...
}

Sample Solution 1 on StackBlitz

---

Solution 2: Return result as Observable<Logdetay[]>

2.1 Return as Observable<Logdetay[]>

logdetay.service.ts

import { Observable } from 'rxjs';

export class LogdetayService {

refreshList(): Observable<Logdetay[]> {
    return this.httpclient
       .get<Logdetay[]>(this.rootUrl + '/Logtbs');
  }
}

2.2 Declare list variable and assign value in subscribe event from Observable

logdetay-liste.component.ts

import { Logdetay } from '../paylas/logdetay.model';

export class LogdetayListeComponent implements OnInit {
  list: Logdetay[];

  constructor(private service: LogdetayService) {}
  ngOnInit() {
    this.service.refreshList().subscribe(res => (this.list = res));
  }
}

2.3 Replace service.list with list

logdetay-liste.component.html

<tr *ngFor="let pd of list">
    ...
</tr>

Sample Solution 2 on StackBlitz