Question

我正在使用带有角度的条形码扫描应用程序。条形码的编号返回一个包含“ box”对象的json。如何将box json解析为angular中的box类？

这是我现有的代码：

//Injectable Dataservice
export class BoxService {
//url vars
urlBegin:string = "url";
urlEinde:string = "/last-order";
url:string;
test;
constructor(@Inject(HttpClient) private http: HttpClient){
}

getBox(barcode):Observable<Box>{
    this.url = this.urlBegin + barcode + this.urlEinde;
    return this.http.get<Box>(this.url);
}

}

// My component using the service showBox() is the method using the service
import { Component, OnInit, Inject, Injectable } from '@angular/core';
import { BoxService } from '../BoxService';
import { Box } from '../Box';

@Component({
selector: 'app-Data',
templateUrl: './Data.component.html',
styleUrls: ['./Data.component.css']
})

export class DataComponent implements OnInit {
uitkomst:String;
box:Box;
constructor(private boxService:BoxService) { }

zoekBarcode(barcode):void{
this.uitkomst = "ik heb info over deze barcode: " + barcode;
this.showBox(barcode);
}

showBox(barcode){
this.boxService.getBox(barcode).subscribe(data => this.box = data);

console.log(this.box.boxNumber.toString());
}
ngOnInit() {

}
}

// Box Class
import { Contentline } from "./Contentline";

export class Box {
boxNumber: number;
status: number;
shipTo: string;
shipToName: string;
contentLines: Contentline[];
}

//Contentline class
export class Contentline {
articleIdCustomer: string;
description: string;
orderId: string;
orderLineId: string;
quantity: number;
uom: string;
closet: any;
shelf: any;
deliveryDate: string;
}

我的JSON字符串如下：

{
    "boxNumber": 13100973,
    "contentLines": [
        {
            "articleIdCustomer": "112050",
            "description": " Nutraclear naaldvrije connector",
            "departmentName": null,
            "deliveryDate": "2018-06-26T22:00:00Z"
        },
        {
            "articleIdCustomer": "101512",
            "description": " LIJN INFUUSVERLENG 400CM 1,5 MM PE/PVC",
            "departmentName": null,
            "deliveryDate": "2018-06-27T22:00:00Z"
        },
        {
            "articleIdCustomer": "101053",
            "description": " LIJN INFUUS 700CM 1X2,1MM     25ST",
            "departmentName": null,
            "deliveryDate": "2018-06-27T22:00:00Z"
        },
        {
            "articleIdCustomer": "101053",
            "description": " LIJN INFUUS 700CM 1X2,1MM     25ST",
            "departmentName": null,
            "deliveryDate": "2018-07-03T22:00:00Z"
        },
        {
            "articleIdCustomer": "101053",
            "description": " LIJN INFUUS 700CM 1X2,1MM     25ST",
            "departmentName": null,
            "deliveryDate": "2018-07-04T22:00:00Z"
        },
        {
            "articleIdCustomer": "101386",
            "description": " DOP AFSLUIT ENTERALE SPUIT ENFIT (PER 8",
            "departmentName": null,
            "deliveryDate": "2018-06-25T22:00:00Z"
        }
    ],
    "status": 3,
    "otherDepartments": []
}

Answer 1

如果您对创建类型安全的对象感兴趣，请考虑以下Box类构造函数（我将其简化为单个字段）：

interface iBox { /* You will get this structure from HTTP get */
  articleIdCustomer: string,

}

class Box implements iBox {
  articleIdCustomer: string,
  constructor(iBox: IBox) {
    this.articleIdCustomer = 
    (typeof(iBox.articleIdCustomer) !== 'undefined') ? iBox.articleIdCustomer : undefuned
  }
}

，然后从Web接收JSON对象：

this.boxService.getBox(barcode).subscribe((data: iBox) => this.box = new Box(data));

如果某些字段是强制性的，则可以在构造函数中引发错误

Answer 2

在代码行下面重写您

this.boxService.getBox(barcode).subscribe(data => this.box = data);

为

this.boxService.getBox(barcode).subscribe(data:Box => this.box = data);

您可以为数据赋予类型，它会相应地自动投射所有对象。

Angular 5使用由一个对象组成的json

2 个答案: