Whenever I make http calls, my goal is to store the received JSON data in a local variable within my component and then showcase it in the view.
Service:
getCases(){
return this.http.get('someUrl')
.map((res: Response) => res.json())
}
Component:
@Component({
template: `
<h1>Cases</h1>
<hr>
<br>
<table>
<tr *ngFor="let acase of cases" >
<td>{{acase.name}}</td>
</tr>
</table>
`,
})
export class CaseListComponent implements OnInit {
//local variables for use within the component
acase: Case;
cases: Case[];
constructor(public _service: CaseService, public _route: ActivatedRoute) {
}
ngOnInit() {
this._service.getCases()
.subscribe(cases => this.cases = cases);
console.log(this.cases) // displays as undefined!!
}
ngAfterContentInit() {
console.log("cases: ", this.cases) // also shows as undefined!
}
}