強く型付けされた配列を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)); 
     }); 
    } 
} 

私はUIに表示したいデータがJSONデータとして来ています。私は、カスタムJSchool.earクラスのjsonデータをラップし、それを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> 

これらの4つのプロパティはいずれもUIに表示されません。

jsonデータを正しくラップしてUIに表示するにはどうすればよいですか？

コンソール出力にエラーは発生しません。

Answer 1

私はそのような何かしようとするだろう：あなたのケースでは

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

を、あなたはSchoolyearクラスのパラメータとして全体のリストを提供します。