display data angular 4

hi,

Assuming you are getting this data in component, assign the result you are getting in "data" to a array of class of type data.(defin a class with the fields you have in data)

Then you can use *ngFor in html template.

posting code snippet from recent development, if it helps

//Component -
import { Resource } from '../resource';
@Component({
selector: 'emp-service-component',
templateUrl: '../app/htpservice/app.employee.view.html'

Here is Resource class defined to hold one set of record of the employee.

When you get data create array/collection of resources.

resources: Array;

Getting data from service

this.serv.getData().subscribe((resp: Response) => {
this.resources = resp.json();

In html

<table class='table table-striped table-bordered'>
<thead>
<tr>
<td>EmployeeIdtd>
<td>FirstNametd>
<td>LasteNametd>
<td>Emailtd>
<td>Contacttd>
tr>
thead>
<tbody>
<tr *ngFor="let r of resources" >
<td>{{r.EmployeeId}}td>
<td>{{r.FirstName}}td>
<td>{{r.LastName}}td>
<td>{{r.EmailId}}td>
<td>{{r.ContactNumber}}td>
tr>
tbody>
table>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tushar Dikshit9y ago
hi,

Assuming you are getting this data in component, assign the result you are getting in "data" to a array of class of type data.(defin a class with the fields you have in data)

Then you can use *ngFor in html template.

posting code snippet from recent development, if it helps
//Component -
import { Resource } from '../resource';
@Component({
selector: 'emp-service-component',
templateUrl: '../app/htpservice/app.employee.view.html'
Here is Resource class defined to hold one set of record of the employee.

When you get data create array/collection of resources.

resources: Array;

Getting data from service
this.serv.getData().subscribe((resp: Response) => {
this.resources = resp.json();
In html
<table class='table table-striped table-bordered'>
<thead>
<tr>
<td>EmployeeIdtd>
<td>FirstNametd>
<td>LasteNametd>
<td>Emailtd>
<td>Contacttd>
tr>
thead>
<tbody>
<tr *ngFor="let r of resources" >
<td>{{r.EmployeeId}}td>
<td>{{r.FirstName}}td>
<td>{{r.LastName}}td>
<td>{{r.EmailId}}td>
<td>{{r.ContactNumber}}td>
tr>
tbody>
table>
Karthik Elumalai9y ago
Hope this link may help for you:https://stackoverflow.com/questions/44894942/returning-data-in-console-log-with-angular-but-not-displaying-on-html-page

Thanks