使用Angular2和typescript,我从webApi返回了JSON,我需要将其放入特定类型的数组中。我不知道如何将json转换为我需要的接口
我的类型是此接口:
出口接口国家/地区{
Id:编号;
名称:字符串;
}
My mock返回此数组:
出口var国家/地区:国家[]=[
{“Id”:11,“Name”:“US”},
{“Id”:12,“Name”:“England”},
{“Id”:13,“Name”:“Japan”}
];
这是我的密码:
国家服务
@Injectable()
出口级乡村服务{
私有_http=null;
构造函数(http:http){
这是http=http;
}
getCountries(){
返回承诺。解决(国家);
}
}
然后我用这个称呼它:
导出类CountryPickerComponent{
公共国家:国家[];
构造函数(私有_countryService:countryService){}
getCountries(){
this.\u countryService.getCountries().then(data=>;this.setData(data));
}
setData(数据){
//这是国家=数据;
this.countries=JSON.parse(数据);
var q=1;
}
恩戈尼尼特(){
这个。getCountries();
}
}
如您所见,我有一个名为countries的类变量,它是Country接口的数组。这正如预期的那样有效。(我知道我不需要setData方法-它是用于调试的)
接下来,我将服务更改为返回此json的wepApi调用
“[{”name:“英格兰”,“id:1},{”name:“法国”,“id:2}”
我将服务中的getCountries方法更改为:
getCountries(){
返回新承诺(解决=>;
这是.\u http.get('http://localhost:63651/Api/membercountry')
.subscribe(数据=>;解析(data.json()))
);
}
使用JSON.parse,我将其转换为一个数组,然后在angular2中使用。它起作用了。它使用数据创建数组。但它不是一个实现国家界面的数组
请注意,JSON中的字段名都是小写的,但接口属性以大写开头,我对接口进行了编码。因此,当我得到真正的json时,它就不起作用了。有没有一种方法可以将其“转换”到接口,该接口会抛出一个错误并让我知道出了什么问题
许多示例在get中使用map,如下所示:
getCountries(){
var-retVal;
返回新承诺(解决=>;
这是.\u http.get('http://localhost:63651/Api/membercountry')
.map(ref=>;ref.json())
.subscribe(数据=>;解析(data.json()))
);
}
我找不到这方面的文档。当我尝试它时,我从未得到数据,但没有错误。没有编译错误和运行时错误
您可以对JSON.parse创建的对象所需的接口执行类型断言
this.http.get('http://localhost:4200/)。订阅((值:响应)=>{
让hero=<;ServerInfo>;value.json();
});
但是,如果服务器出于两个原因向您发送错误对象,这不会导致任何错误
在编译时,transpiler不知道服务器将发送什么
在运行时,所有类型信息都被删除,因为所有内容都被编译为
javascript