我有一个返回 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 字符串并将“名称”值(“TestName”映射到我在 home.ts 文件中声明的现有 CustomObject 变量,该变量默认为空:
public activeCustomObject: CustomObject = null;
但是,在执行 HTTP Get 方法以检索 JSON 响应后(我希望变量“activeCustomObject”现在将其“名称”字段设置为“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(); // <-----------
});
}
关于javascript - 将 JSON 响应映射到 TypeScript 中的组件模型。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37576846/