list.component.ts
import { Component, OnInit } from '@angular/core';
import { StudentAPIService } from 'src/app/services/student-api.service';
import { Student } from 'src/app/model/student';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor( private studentAPI: StudentAPIService ) { }
ngOnInit(): void {
this.studentAPI.studentList().subscribe(res=>{
console.log(res);
return res;
});
}
}
list.component.html
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="center">
<table id="student_Table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of res">
<td>{{ row.student_name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am new in angular and I want to show data in list.component.html table. In ts file I have successfully fetch data through an API and data are showing in console.log(res) but unable to show in table. So, How can I do this? Please help me.
Thank You
>Solution :
You have to define the variable (and it should be public) in the class definition, then assign the service response to that variable. So;
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
constructor( private studentAPI: StudentAPIService ) { }
public res: any | any[]; // you can create an interface to the data type
ngOnInit(): void {
this.studentAPI.studentList().subscribe(res=>{
this.res = res;
});
}
}