Question

我正在为看起来非常简单的程序而苦苦挣扎。

在“geolocate.ts”函数“setData”中，模型索引？当从“model.flightplan”或“model.config”引用时，Chrome调试器将“flightplan”和“config”显示为“未定义”。即使在调试器中扩展，“模型”对象本身似乎也没问题。

任何想法或指示都会非常感激;）

geolocate.d.ts

export class FmsFlightPlan {
    public status: string[];
    ...
}

export class Config {
    public airportIcon: IconSettings;
    ...
}

export class InitModel {
    public config: Config;
    public flightplan: FmsFlightPlan;
}

geolocate.ts

import * as passedData from "./geoLocate.d";

let config: passedData.Config;
let flightPlan: passedData.FmsFlightPlan;

export function setModel( json: string): void {
    console.log( json);  // '{"Config": { "AirportIcon": {...} ...}, {"Flightplan": {"Status": [], ... } ...}'  --- As expected (JSONlint OK)

    const model: passedData.InitModel = JSON.parse( json);
    console.log(model);  // Chrome console: {Config: {…}, Flightplan: {…}}

    flightPlan = model.flightplan; // flightPlan and config are assigned "undefined"
    config = model.config;     // "model" looks OK and Intellisense works.

    flightplanDraw();
}

TSC生成了javascript

function setModel(o) {
    console.log(o);
    var e = JSON.parse(o);
    console.log(e), flightPlan = e.flightplan, config = e.config, flightplanDraw()
}

.NET核心视图Javascript

function gmapsReady() {

    initMap();
    $.getJSON("/Home/GetConfig",
        null,
        function(data) {
            setModel(data);
        });
 }

.NET MVC控制器

public JsonResult GetConfig()
{
    // Load fplan and config objects
    ...
    ... 

    InitModel initModel = new InitModel
    {
        Flightplan = fplan,
        Config = _config
    };

    string json = JsonConvert.SerializeObject(initModel);
    return new JsonResult(json);
}

Answer 1

第一个问题似乎是您正在访问flightplan和config等字段，而在JSON中，它们是FlightPlan和Config。这就是你获得undefined的原因。

之后的一个稍微大一点的问题是，如果你打算在你的类中添加方法，那么你会发现这个问题是JSON.parse生成的东西是一个简单的JavaScript对象，而Config，{ {1}}等是类，它们的实例属于该类。所以如果你有这样的事情：

FlightPlan

所以这两者在结构上是等价的，但在功能上并不相同。即使通过进行TS演员，您也无法像let x = new Config(); x.airportIcon = 'foo'; console.log(x.constructor); // Prints 'Config' let y = JSON.parse('{"airportIcon": "foo"}'); console.log(y.constructor); // Prints 'Object something or other'那样在y上调用函数。如果这些是简单的DTO，那就没问题。但如果没有，你需要明确这一点，并做一个从JS对象转换为应用程序对象的步骤。

无耻的插件：我写了raynor来自动完成这个过程 - 在DTO类型和更有用的JavaScript类之间进行翻译。

您还可以在.net端配置JSON序列化程序，将字段名称从x转换为＆＃39; camelCase`。

将JSON字符串去序列化为TS对象

1 个答案: