Wie bind ich ein stark typisiertes Array in html

Question

Ich bin ein eckiger 2/TS Anfänger.

Ich habe dieses Schuljahr Komponente:

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

Die Daten, die ich in der Benutzeroberfläche angezeigt werden soll als JSON-Daten kommen. Ich muss diese JSON-Daten in eine benutzerdefinierte Schooleear.ts-Klasse umbrechen und dann in der Benutzeroberfläche binden.

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> 

Keine dieser 4 Eigenschaften sind in der Benutzeroberfläche angezeigt.

Wie wickle ich die JSON-Daten korrekt um und zeige sie in der Benutzeroberfläche an?

Ich bekomme keine Fehler in der Konsolenausgabe.

Answer 1

würde ich so etwas versuchen:

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

In Ihrem Fall bieten Ihnen die gesamte Liste als Parameter der Schoolyear Klasse.