如何在angular2 nativescript中获取本地json文件路径
我是本地脚本angular2的新手。到目前为止，我遵循了文档和 使用listview创建静态数据如何在angular2 nativescript中获取本地json文件路径,angular,typescript,nativescript,angular2-services,Angular,Typescript,Nativescript,Angular2 Services,我是本地脚本angular2的新手。到目前为止，我遵循了文档和 使用listview创建静态数据 我将json文件放在app/utils/countries.json中 我不知道如何获取本地文件路径来解析json。需要关于这方面的建议 下面我发布了带有静态数据的listview代码 类型脚本： import { Component, ElementRef, OnInit, ViewChild } from "@angular/core"; @Component({ selector:
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" });
}
}
<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>
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")
);
}
}
arrList=require（“./utils/countries.json”）arrList{“国家”：[…]}arrList=require（“./utils/countries.json”）arrList{“国家”：[…]}import{Http}从“@angular/Http”
如果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;
}
getCountries（）：承诺{
返回this.http.get（“~/utils/countries.json”，this.createRequestOptions（））
.toPromise（）
。然后（resp=>
resp.json（）
)
.catch（（错误）=>{
console.log（错误）；
});
}
私有createRequestOptions（）{
let headers=新的headers（）；
//在此处设置标题，例如。
//headers.append（“AuthKey”、“my key”）；
//附加（“AuthToken”、“我的token”）；
headers.append（“内容类型”、“应用程序/json”）；
let options=newrequestoptions（{headers:headers}）；
返回选项；
}
您也可以使用从“@angular/Http”导入{Http}
如果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;
}
getCountries（）：承诺{
返回this.http.get（“~/utils/countries.json”，this.createRequestOptions（））
.toPromise（）
。然后（resp=>
resp.json（）
)
.catch（（错误）=>{
console.log（错误）；
});
}
私有createRequestOptions（）{
let headers=新的headers（）；
//在此处设置标题，例如。
//headers.append（“AuthKey”、“my key”）；
//附加（“AuthToken”、“我的token”）；
headers.append（“内容类型”、“应用程序/json”）；
let options=newrequestoptions（{headers:headers}）；
返回选项；
}
下面的代码帮助我检索本地路径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:
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" });
}
}
<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>
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")
);
}
}
下面的代码用于检索本地路径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:
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" });
}
}
<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>
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")
);
}
}
实际上，您可以同步读取文件，例如：
import * as fs from 'tns-core-modules/file-system';
const countries = this.getJSONdata("countries.json");
getJSONdata(fileName: string) {
const folder = this.getFolder("utils");
const jsonFileName = fs.path.join(folder.path, fileName);
const jsonFile = fs.File.fromPath(jsonFileName);
const data = jsonFile.readTextSync().trim();
if (data.length === 0) { data = "[]"; }
return JSON.parse(data);
}
getFolder(folderName: string) {
const path = fs.path.join(fs.knownFolders.currentApp().path, folderName);
const folder = fs.Folder.fromPath(path);
return folder;
}
实际上，您可以同步读取文件，例如：
import * as fs from 'tns-core-modules/file-system';
const countries = this.getJSONdata("countries.json");
getJSONdata(fileName: string) {
const folder = this.getFolder("utils");
const jsonFileName = fs.path.join(folder.path, fileName);
const jsonFile = fs.File.fromPath(jsonFileName);
const data = jsonFile.readTextSync().trim();
if (data.length === 0) { data = "[]"; }
return JSON.parse(data);
}
getFolder(folderName: string) {
const path = fs.path.join(fs.knownFolders.currentApp().path, folderName);
const folder = fs.Folder.fromPath(path);
return folder;
}
您想导入app/utils
文件夹中的json文件？@mast3rd3mon是。我需要解析该目录app/utils/countries.json中的countries.json文件。您想导入app/utils
文件夹中的json文件？@mast3rd3mon是。我需要解析该countries.json文件文件放置在此目录app/utils/countries.json中。您可能不需要require字符串中的/
。我不知道如何解析数据。我没有找到任何与此相关的示例。我只查看了json的http相关示例。在这里，我似乎不需要该http，因为我需要在本地路径中解析它。你是什么意思？将arrList
分配给countries.json文件意味着arrList[0].id
等于1，arrList[1].id
等于2，因此您可能不需要require字符串中的/
。我不知道如何解析数据。我没有找到任何与此相关的示例。我只查看了json的http相关示例。这里我似乎不需要该http，因为我需要在本地路径中解析它。你是什么意思？将arrList
分配给countries.json文件意味着arrList[0]。id
等于1，arrList[1]。id
等于2，依此类推。如果需要，上述“fromPath”调用将创建文件夹/文件。如果需要，上述“fromPath”调用将创建文件夹/文件。