Webからの応答であるネストされたjson配列をAngular2のモデル配列にマッピングできません。次のようにjson配列の応答があると仮定します:
[{
"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"
}]
リンクを参照するフィールドを手動でマップしようとしました Angular 2 observableはモデルに「マップ」しません 私のモデルにngFor .....を反復することでHTMLでそれらを表示することができましたしかし、nclocとlinesの値もHTMLにも表示したいのですが、上記のリンクで述べたように、それらの値をモデル配列にマップする方法がわかりません。これで私を助けてもらえますか?
ありがとう。
[〜#〜] edit [〜#〜]
モードクラス
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));
}
}
モデルとマッピングを大幅に簡素化できます。 APIレスポンスを手動でマッピングする必要はありません。 JavaScript/TypeScriptがこれを行います。
まず、複数のインターフェースが必要です。
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;
}
その後、TypeScriptのas
- "operator"を使用して、API応答をDeiInstanceタイプにキャストできます。
sealSearch(term: string): Observable<DeiInstance[]> {
return this.http.get(this.sealUrl + term)
.map(response => response.json() as DeiInstance[])
.catch(this.handleError);
}
クラスの代わりにインターフェイスを使用する場合、クライアントブラウザに送信されるプロダクションコードが少ないという利点もあります。インターフェイスは、プリコンパイル時または呼び出したい場合にのみ存在します。
私のコードが機能し、それがあなたの問題を解決することを願っています。