尝试使用JSON解析对象时出现非常奇怪的行为

Question

我正在忙于重写最初用angular4和typescript写成Angularjs（1.x）和typecript的Web应用程序。我试图解析一组LayoutLines的字符串表示，这些字符串由于某些未知原因而被存储为数据库表的一行中的单个字符串值。出于某种原因，当我将012显示为（3）{...} {...} {...}而不是将chrome开发工具中的lines变量显示为Array（length）时，我将其显示为（3）{012}。但它确实包含数据，所以我猜测我不正确理解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以正确映射对象...