logdetail.service.ts
import { Injectable } from '@angular/core';
import { LogDetail } from './logdetail.model';
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: 'root'
})
export class LogdetailService {
formData:LogDetail={
Message: null,
CreateDate: null,
LogType: null,
Int: null
};
readonly rootUrl='https://localhost:44370/api';
list : LogDetail[];
constructor(private httpclient:HttpClient) { }
postLogDetail(formData:LogDetail){
return this.httpclient.post(this.rootUrl+'/Logtbs',formData);
}
refreshList()
{
this.httpclient.get(this.rootUrl + '/Logtbs')
.toPromise()
.then(res => this.list = res as LogDetail[]);
}
}
logdetail-list.component.html
<table class="table table-hover">
<tr *ngFor="let pd of service.list">
<td >{{pd.Message}}</td>
<td >{{pd.Logtype}}</td>
</tr>
</table>
logdetail-list.component.ts
import { Component, OnInit } from '@angular/core';
import { LogDetail } from 'src/app/shared/logdetail.model';
import { LogDetailService } from 'src/app/shared/logdetail.service';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-logdetail-list',
templateUrl: './logdetail-list.component.html',
styles: []
})
export class LogdetailListComponent implements OnInit {
constructor(private service : LogDetailService) { }
ngOnInit() {
this.service.refreshList();
}
}
Output:
this.service.refreshList(); in logdetail-list.component.ts value is undefined.
I am fetching data from a web API. I have successfully inserted data. How can I display the values on the page?