Question

我有一个Angular 2应用程序，它返回一个JSON字符串。我想获取该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字符串没有被映射到自定义对象变量。

Answer 1

我认为这是因为您的数据是异步加载的。我猜您的JavaScript控制台中有错误...

您可以尝试以这种方式使用Elvis运算符：

{{activeCustomObject?.Name}}

我还看到另一个问题。您需要在响应上调用json方法而不是属性：

getActiveCustomObject() {
  return this._http.get('/test/customobject')
    .map((response) => {
        console.log(response);
        return response.json(); // <-----------
    });
}

在Word中将JSON响应映射到组件模型。

1 个答案: