Angular2 Ánh xạ mảng json lồng nhau thành mô hình

Question

Tôi không thể ánh xạ mảng json lồng nhau là phản hồi từ Web đến mảng mô hình của tôi trong Angular2. Giả sử tôi có phản ứng mảng json như sau:

[{ 
    "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" 
}] 

Tôi đã cố gắng tự lập bản đồ các lĩnh vực đề cập vào liên kết Angular 2 observable doesn't 'map' to model để mô hình của tôi và đã có thể hiển thị những người trong HTML của tôi bằng cách duyệt qua ngFor ..... nhưng Tôi cũng muốn hiển thị giá trị ncloc và dòng cũng trong HTML nhưng tôi không chắc chắn làm thế nào để ánh xạ các giá trị đó vào mảng Mô hình của tôi như đã đề cập trong liên kết ở trên. Bạn có thể giúp tôi với điều này không?

Cảm ơn.

EDIT

Chế độ lớp

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

Bạn có thể đơn giản hóa mô hình của bạn và lập bản đồ của bạn rất nhiều. Bạn không cần ánh xạ phản hồi API của mình theo cách thủ công. JavaScript/TypeScript có thể làm điều này cho bạn.

Trước tiên, bạn cần nhiều giao diệ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; 
} 

Sau đó bạn có thể sử dụng as - "điều hành" của nguyên cảo để cast phản ứng API của bạn để Type DeiInstance.

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

Nếu bạn sử dụng giao diện thay vì các lớp, bạn cũng có lợi thế là bạn có ít mã sản xuất hơn sẽ được sử dụng cho trình duyệt của khách hàng. Giao diện chỉ có sẵn cho thời gian biên dịch trước hoặc tuy nhiên bạn muốn gọi nó.

Hy vọng mã của tôi hoạt động và giải quyết được sự cố của bạn.