Как связать сильно типизированный массив в html

Question

Я угловатый начинающий 2/TS.

У меня есть этот schoolyears компонент:

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)); 
     }); 
    } 
} 

Данные, которые я хочу показать в интерфейсе подходит как данные JSON. Мне нужно обернуть эти данные json в пользовательский класс Schoolyear.ts, а затем привязать его в пользовательском интерфейсе.

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> 

Ни один из этих 4 свойств не отображается в пользовательском интерфейсе.

Как правильно обернуть данные json и отобразить его в пользовательском интерфейсе?

У меня нет ошибок в выводе на консоль.

Answer 1

Я хотел бы попробовать что-то вроде этого:

this._schoolyearsService.getSchoolyears().map(years => { 
    return years.map(year => new Schoolyear(year)); 
}).subscribe(years => { 
    this.schoolyears = years; 
}); 

В вашем случае, вы предоставляете весь список в качестве параметра Schoolyear класса.