[英]Mapping a JSON response to component model in TypeScript.
我有一个返回JSON字符串的Angular 2应用程序。 我想获取该JSON字符串并将其值映射到模型。
根据我的理解,TypeScript模型文件应该有助于将HTTP Get响应映射到一个对象 - 在我的例子中是一个被归类为'CustomObject'的类。 这是我为TypeScript创建的TypeScript模型文件,用于识别:
export class CustomObject {
public Name: string;
}
这是我的JSON字符串的样子(从Chrome开发工具略微修改以消除不必要的变量):
"{
"EventType": 3,
"Description": "Test Description",
"LocationName": "DefaultLocation",
"Name": "TestName"
}"
我想获取该JSON字符串并将'Name'值(“TestName”)映射到我在home.ts文件中声明的现有CustomObject的变量,默认情况下为null:
public activeCustomObject: CustomObject = null;
但是,在执行HTTP Get方法以检索JSON响应之后(我希望变量'activeCustomObject'现在将其'Name'字段设置为'TestName',在我的HTML文件中调用{{activeCustomObject.Name}}不会打印任何内容。我已完成正确的导入并设置提供程序。
这是我订阅的方式:
this._customObjectService.getCustomObject()
.subscribe(res => {
this.activeCustomObject = res;
});
这就是我调用GET方法的方式:
getActiveCustomObject() {
return this._http.get('/test/customobject')
.map((response) => {
console.log(response);
return response.json;
});
}
关于为什么调用{{activeCustomObject.Name}}在我的HTML中什么都不打印的任何想法? Chrome开发工具显示JSON正在返回一个包含我需要的数据的正确JSON字符串(主要是名称)。 我计划使用JSON字符串中的其他值,所以我不能只让HTTP GET返回名称字段 - 我需要知道为什么返回的JSON字符串没有被映射到自定义对象变量。
我认为这是因为您的数据是异步加载的。 我想您的JavaScript控制台中有错误...
您可以尝试以这种方式使用Elvis运算符:
{{activeCustomObject?.Name}}
我也看到了另一个问题。 您需要在响应上调用json
方法而不是属性:
getActiveCustomObject() {
return this._http.get('/test/customobject')
.map((response) => {
console.log(response);
return response.json(); // <-----------
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.