2017-08-10 76 views
-1

我正在忙於重寫最初用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對象時,它不是未定義的?否則,有什麼想法可能會出現問題在這裏/如何去解決它?我的代碼/輸出如下。嘗試使用JSON解析對象時出現非常奇怪的行爲

由後端返回的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); 
+0

這裏有什麼特定的問題?它看起來像字符串被正確解析成一個對象? – 0mpurdy

+0

我對這個問題也有點困惑。問題是什麼?這個@ @ Input來自哪裏?顯然,父母是怎麼樣的? – Alex

回答

0

原來我LayoutLine模型和JSON數據不完全匹配,我不得不添加一個模型變量LayoutLine類型的LayoutLineObj以正確映射對象...