Angular2将一个json结果转换为一个接口
使用Angular2和typescript,我有一个从webApi返回的JSON,我需要把它变成一个特定类型的数组。我不知道如何将json转换到我需要的界面。
我的类型是这个界面: export interface Country { Id: number; Name: string; } 我的mock返回这个数组: export var COUNTRIES: Country[] = [ { "Id": 11,"Name": "US" },{ "Id": 12,"Name": "England" },{ "Id": 13,"Name": "Japan" } ]; 这是我的代码: @Injectable() export class CountryService { private _http = null; constructor(http: Http) { this._http = http; } getCountries() { return Promise.resolve(COUNTRIES); } } 然后我用这个叫它: export class CountryPickerComponent { public countries: Country[]; constructor(private _countryService: CountryService) { } getCountries() { this._countryService.getCountries().then(data => this.setData(data)); } setData(data) { //this.countries = data; this.countries = JSON.parse(data); var q = 1; } ngOnInit() { this.getCountries(); } } 如你所见,我有一个类变量,称为国家,它是一个国家界面的数组。这样可以预期。 (我知道我不需要setData方法 – 这是为了调试) 接下来,我将服务更改为一个返回此json的wepApi调用。 "[{"name":"England","id":1},{"name":"France","id":2}]" 我将服务中的getCountries方法更改为: getCountries() { return new Promise(resolve=> this._http.get('http://localhost:63651/Api/membercountry') .subscribe(data => resolve(data.json())) ); } 使用JSON.parse,我将其转换为一个数组,然后我可以在angular2中使用。有用。它使用数据创建数组。但是它不是一个实现Country接口的数组。 请注意,JSON中的字段名称都是小写字母,但是接口属性以大写开头,并将其编码到接口。结果,当我得到真正的json它不工作。有没有办法将这个“投射”到界面,这会引起错误,让我知道有些错误? 很多例子使用map中的map,如下图所示: getCountries() { var retVal; return new Promise(resolve=> this._http.get('http://localhost:63651/Api/membercountry') .map(ref => ref.json()) .subscribe(data => resolve(data.json())) ); } 我找不到文件。当我尝试它,我从来没有获得数据,但没有错误。没有编译错误,没有运行时错误。
您可以对由JSON.parse创建的对象所期望的接口进行类型断言。
this.http.get('http://localhost:4200/').subscribe((value: Response) => { let hero = <ServerInfo>value.json(); }); 但是,如果由于两个原因,服务器发送坏对象,则不会导致任何错误。 在编译时,transpiler不知道服务器将发送什么。 在运行时,所有类型的信息都被擦除,因为一切都被编译成了JavaScript的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Vim突出显示单词列表
- 使用cxf生成webservice java代码
- 网络 – 如何使用Docker(或Linux容器)进行网络仿真?
- angularjs – Angular JS:使用Angular有哪些问题/陷阱?
- 如何更换Scala 2.9并行集合的fork连接池?
- AngularJs将复杂数据传递到指令
- 打造立体化监控体系与APM最佳实践系列 –Zipkin部署与使用
- Angular2挖坑求解系列之一:刷新显示HTTP Error 404.0 - No
- JBoss AS 6.1.0 Final bootstrap.xml的解析过程
- angularjs – 如何对集合中的项目进行Restangularize离开父