I am new to Angular 2 and TypeScript.
Currently, I have a Schoolyears component with the following code:
export class SchoolyearsComponent implements OnInit {
schoolyears: Schoolyear[] = new Array();
constructor(
private _router: Router,
private _schoolyearsService: SchoolyearsService) {
}
ngOnInit()
{
this._schoolyearsService.getSchoolyears().subscribe(s => {
this.schoolyears.push(new Schoolyear(s));
});
}
}
The data that needs to be displayed in the UI is json data. To achieve this, I must encapsulate the json data within a custom Schoolyear.ts class before binding it to the UI.
export class Schoolyear {
constructor(obj)
{
this.id = obj.id;
this.name = obj.name;
this.startDate = new Date(obj.startDate);
this.endDate = new Date(obj.endDate);
}
id: number;
name: string;
startDate: Date;
endDate: Date;
}
<div>
<div *ngFor="#s of schoolyears">
<div style="font-weight:bold;">
<h4>{{s.id}}</h4>
<h4>{{s.name}}</h4>
<p>{{ s.startDate}}</p>
<p>{{ s.endDate}}</p>
</div>
</div>
</div>
Despite correctly implementing the properties, none of them are showing up on the UI.
What do I need to change in order to wrap the json data properly and showcase it in the UI?
There are no errors being displayed in the console output.