Angular2 Yuvalanmış json dizisini eşleme modeli

Question

Web'den Angular2'deki model dizilim yanıtı olan yuvalanmış json dizisini eşleştiremiyorum. Ben aşağıda json dizi yanıtını olduğunu varsayalım: elle benim model bağlantısını Angular 2 observable doesn't 'map' to model atıfta alanları harita çalışırken ve ngFor yineleme benim HTML olanlar görüntülemeyi başardı ..... fakat

[{ 
    "base_url": "http://mysearch.net:8080/", 
    "date": "2016-11-09", 
    "lname": "MY PROJ", 
    "name": "HELLO", 
    "description": "The Test Project", 
    "id": 10886789, 
    "creationDate": null, 
    "version": "2.9", 
    "metrics": [{ 
     "val": 11926.0, 
     "frmt_val": "11,926", 
     "key": "lines" 
    }, 
    { 
     "val": 7893.0, 
     "frmt_val": "7,893", 
     "key": "ncloc" 
    }], 
    "key": "FFDFGDGDG" 
}] 

Ayrıca HTML'de de ncloc ve satırlar değerini göstermek istiyorum ancak yukarıdaki değerleri yukarıdaki linkte belirtildiği gibi Model dizilimimle nasıl eşleştireceğimi bilmiyorum. Bu konuda bana yardımcı olabilir misiniz?

Teşekkürler.

DÜZENLEME

Mod sınıfı

export class DeiInstance { 
    base_url: string; 
    date: string; 
    lname : string; 
    name : string; 
    id : number; 
    key:string; 

    constructor(obj: DeiInstance) { 
     this.sonar_url = obj['base_url']; 
     this.lname = obj['lname']; 
     this.name = obj['name']; 
     this.id = obj['id']; 
     this.key = obj['key']; 
     this.date = obj['date']; 
    } 

    // New static method. 
    static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] { 
     return array.map(obj => new DeiInstance(obj)); 
    } 
} 

Answer 1

Sen modelinizi kolaylaştırabilirsiniz ve sizin çok haritalama. API yanıtınızı el ile eşleştirmeniz gerekmez. JavaScript/TypeScript bunu sizin için yapabilir.

İlk önce birden çok arabirime ihtiyacınız var. DeiInstance Türü API yanıtını atmak typescript ait "operatörünü" -

export interface DeiInstance { 
    base_url: string; 
    date: string; 
    lname: string; 
    name: string; 
    description: string; 
    id: number; 
    creationDate: string; //probably date 
    version: string 
    metrics: Metric[]; 
    key: string; 
} 

export interface Metric { 
     val: decimal; 
     frmt_val: decimal; 
     key: string; 
} 

Daha sonra as kullanabilirsiniz.

sealSearch(term: string): Observable<DeiInstance[]> { 
     return this.http.get(this.sealUrl + term) 
      .map(response => response.json() as DeiInstance[]) 
      .catch(this.handleError); 
} 

Eğer arabirimleri yerine sınıflarını kullanırsanız

ayrıca istemci tarayıcısına Sended edilecektir az üretim koduna sahip avantajı var. Arayüz sadece ön-derleme zamanı içindir, ancak bunu aramak istersiniz.

Umut benim kod çalışır ve sorununuzu çözer.