尝试使用JSON.parse反序列化对象时非常奇怪的行为

Question

我正在忙着重写一个最初用Angularjs（1.x）编写的web应用程序和angular4和typescript中的打字稿。我试图解析一组LayoutLines的字符串表示，由于某种未知的原因，它被存储为数据库表的一行中的单个字符串值。出于某种原因，当我JSON.parse items.LayoutData而不是在chrome dev工具中将行变量显示为Array（长度）时，它只显示为（3）{...} {...} {...}。但它确实包含数据，所以我猜我不正确理解JSON.parse？我应该能够使用JSON.parse将JSON字符串映射到模型吗？我正在试图找出为什么inOnInit中的本地项变量未定义，当我将它分配给this.line的LayoutItems对象时，这是未定义的？否则，任何想法在这里可能会出错/如何解决它？我的代码/输出如下。

后端返回的items.LayoutData JSON字符串如下所示：

[{"LayoutLineObj":{"PreLineFeeds":null,"PostLineFeeds":"","LayoutLineItemObjects":[{"LayoutTextObj":{"Text":"asdfgf","TextAttributes":{"Bold":false,"Underline":false,"Italic":false,"FontSize":"single","Align":"left"}}},{"LayoutImageObj":{"ImageUri":"/file","ImageFilename":"f1","ImageSourceType":"http","ImageWidth":"1","ImageAlignment":"center"}},{"LayoutBarcodeFieldObj":{"BarcodeFieldName":"123","Barcode":{}}},{"LayoutTextFieldObj":{"FieldName":"Field1","TextAttributes":{"Bold":true,"Underline":false,"Italic":false,"FontSize":"single","Align":"left"}}},{"LayoutTextObj":{"Text":";lkjhj","TextAttributes":{"Bold":false,"Underline":false,"Italic":false,"FontSize":"single","Align":"left"}}}]}},{"LayoutCommandObj":{"CommandType":{"LineFeedLines":"2","PaperCutPercentage":100,"RenderCommandTypeData":"PaperCut"}}},{"LayoutItemRefGuidObj":"e27534dc-bed3-4f24-84b7-b5c1946305a3"}]

my component code:

    //variable declarations:
    @Input() items: any;
    @Input() lineIndex: number;
    lines: Array<LayoutLine>;
    line: LayoutLine;

    //in ngOninit 
    this.lines = JSON.parse(this.items.LayoutData);
    console.log("lines");
    console.log(this.lines);
    this.line = this.lines[this.lineIndex];
    let items: Array<LayoutLineItem> = this.line.LayoutLineItemObjects;
    console.log("items");
    console.log(items);
    console.log("line");
      console.log(this.line);


the output I get in chrome dev tools console:
lines
(3) [{…}, {…}, {…}]

items:
undefined

lines
{LayoutLineObj: {...}}
    LayoutLineObj:
        Array(5)
            0: {LayoutTextObj: {…}}
            1: {LayoutImageObj: {…}}
            2: {LayoutBarcodeFieldObj: {…}}
            3: {LayoutTextFieldObj: {…}}
            4: {LayoutTextObj: {…}}
            length: 5
            __proto__: Array(0)
        PostLineFeeds: ""
        PreLineFeeds: null
        __proto__: Object

my LayoutLine model:
import { LayoutLineItem } from './layout-line-item.model';

export class LayoutLine {
    public LayoutLineItemObjects: Array<LayoutLineItem>;
    public PreLineFeeds: number = null;
    public PostLineFeeds: number = null;

    constructor() {
        this.LayoutLineItemObjects = new Array<LayoutLineItem>();
    }          
}

import { LayoutText } from './layout-text.model';
import { LayoutTextField } from './layout-text-field.model';
import { LayoutImage } from './layout-image.model';
import { LayoutBarcodeField } from './layout-barcode-field.model';

export class LayoutLineItem {
    public LayoutText: LayoutText; 
    public LayoutTextField: LayoutTextField; 
    public LayoutImage: LayoutImage; 
    public LayoutBarcodeField: LayoutBarcodeField; 
}

in the previous angular 1.x version lines was deserialized like this:

this.selectedLayoutItem.LayoutItemObjects = angular.fromJson(layoutDef.LayoutData);

Answer 1

事实证明我的LayoutLine模型和JSON数据并不完全匹配，我不得不添加一个模型，其中包含LayoutLine类型的变量LayoutLineObj，以使对象正确映射...