html

2016-04-10 22 views
0

'da yazılan bir dizgiyi nasıl bağlarım? 2/TS başlangıç ​​değerine sahip biriyim.html

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

Ben arayüzünde göstermek istediğiniz veri json veri olarak geliyor:

Bu bileşen schoolyears var. Bu json verilerini özel bir Schoolyear.ts sınıfında sarmalı ve ardından onu UI'ye bağlamalıyım.

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> 

Bu 4 özellik hiçbiri UI'de görüntülenmez.

Json verilerini doğru bir şekilde nasıl sarmalı ve bunu UI'de görüntüleyebilirim?

Konsol çıktısında hata bulunamam.

cevap

0

Ben böyle bir şey denemek istiyorum: Senin durumunda

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

, sen Schoolyear sınıfın parametre olarak bütün liste sunar.

+0

Gerçekten mi? .map fonksiyonunun Linq ile .select gibi çalıştığını düşündüm. Ahh ... gerçekten geç haha ​​ben haritayı bile kullanmıyorum ... İstedim ... – Pascal

+0

Neden bir harita çağrısı ile çalıştığından TWO harita çağrılarını kullandığınızı bilmiyorum: this._schoolyearsService.getSchoolyears(). (yıl => { this.schoolyears = yıl.map (y => yeni Schoolyear (y)); }); – Pascal

+0

Sizin durumunuzda benzer. Eşlemeyi hizmetinize taşımak istiyorsanız buna ihtiyacınız vardır. Bu durumda, gözlemlenebilir harita operatörü, veri akışını uyarlamak için gereklidir. Aksi takdirde haklısın harita metodu diziden yeterlidir ;-) –