angular2 nativescriptでローカルjsonファイルパスを取得する方法

Question

• nativescript angular2が新しく追加されました。これまでのところ私はドキュメンテーションに従っており、 はlistviewで静的なデータを出しました。

• jsonファイルをapp/utils/countries.jsonに配置しました。

• ローカルファイルパスを取得してjson.needを解析する方法がわかりません。

• 以下、静的なデータを持つリストビューのコードを掲載しました。

typescriptです：

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; 

@Component({ 
    selector: "ns-app", 
    templateUrl: "app.component.html", 
}) 
export class AppComponent implements OnInit { 

arrList: Array<Object> = []; 

    ngOnInit() { 
    this.arrList.push({ name: "India" }); 
    this.arrList.push({ name: "Sri Lanka" }); 
    } 

} 

HTML：

<page-router-outlet></page-router-outlet> 

<GridLayout> 
    <ListView [items]="arrList" class="small-spacing"> 
    <ng-template let-item="item"> 
     <Label [text]="item.name" class="medium-spacing"></Label> 
    </ng-template> 
    </ListView> 
</GridLayout> 

countries.json：（APP/utilsの/ countries.json）：

{ 
    "countries": [ 
       {"id":1,"name":"india"}, 
       {"id":2,"name":"Sri Lanka"} 

    ] 
} 

Answer 1

以下のコードはローカルパスjsonオブジェクトを取得するために働き、コマンドプロンプトに表示しました。

getdata.component.ts

import {Injectable} from "@angular/core"; 
import {Http,Response} from '@angular/http'; 
import { HttpModule }      from '@angular/http'; 

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/share'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/Rx'; 

@Injectable() 
   export class GetData { 


constructor(private _http:Http) { 

} 


getObjectData() { 

return this._http.get('/utils/countries.json') 
    .map(data => console.log("Test", JSON.stringify(data.json()))); 

} 

}       

app.component.ts：あなたは `アプリ/ utils`フォルダ内の持つJSONファイルをインポートしたい

import { Component, OnInit, ViewChild } from "@angular/core"; 

import { GetData } from './pages/getData.component'; 
 import { Observable } from 'rxjs/Observable'; 
import {Http,Response, RequestOptions} from '@angular/http'; 

@Component({ 
    selector: "ns-app", 
    templateUrl: "app.component.html", 
    styleUrls: ["./app.css"], 
    providers: [GetData] 
}) 

    export class AppComponent implements OnInit { 

    setData : string; 
    objectData : any; 

    constructor(public getData: GetData, private http: Http) { 
    
    } 

    ngOnInit() { 

    console.log("first", "Test"); 

    this.getData.getJsonObject() 
    .subscribe(data => this.getData = JSON.stringify(data), 
    error => alert(error), 
    () => console.log("finished") 

);  

    } 


}   

Answer 2

arrList = require("./utils/countries.json")このトリックを行う必要があります。 arrListはその後、あなたはまた、import { Http } from "@angular/http";

を使用することができます{"countries": [...]}

Answer 3

URLはこれで〜/

で始まる場合NativeScriptからNSHttpオブジェクトがローカルファイルシステムになりますになるあなたは、場合によっては、URLを置き換えることができますユーザーはオンラインまたはオフラインです。

getCountries(): Promise<any> { 
     return this.http.get("~/utils/countries.json", this.createRequestOptions()) 
      .toPromise() 
      .then(resp => 
       resp.json() 
      ) 
      .catch((error) => { 
       console.log(error); 
      }); 
} 

private createRequestOptions() { 
    let headers = new Headers(); 
    // set headers here e.g. 
    //headers.append("AuthKey", "my-key"); 
    //headers.append("AuthToken", "my-token"); 
    headers.append("Content-Type", "application/json"); 

    let options = new RequestOptions({ headers: headers }); 
    return options; 
}