Angular 5消耗由一个对象组成的json [重复]答案

【问题标题】：Angular 5 consume json consisting of one object [duplicate]Angular 5消耗由一个对象组成的json [重复]
【发布时间】：2018-12-28 10:34:36
【问题描述】：

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

这是我现有的代码：

//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": []
}

【问题讨论】：

这个问题每天被问两次。你需要了解什么是异步。类比：当你把吐司放进烤面包机后，你就想马上吃。那时吐司还没有准备好。只有当烤面包机通知您烤面包时，它才准备就绪，即当调用传递给 subscribe() 的回调时。这就是异步。
我如何确定我的吐司什么时候准备好？ :P 我知道什么是异步。我已经用 javascript 制作了东西。我只是在角度方面遇到了一些困难。
你可以确定它已经准备好了，因为传递给 subscribe() 的回调被调用了。所以在这个回调中打印你的盒子。不是在您发送请求后立即。
好的，感谢您的帮助。我现在有这个： this.boxService.getBox(barcode).subscribe(data => { console.log(data); data = this.box; console.log(this.box.boxNumber); });还是说boxNumber是未定义的
data = this.box 使用 this.box 初始化数据。你必须做相反的事情：this.box = data;。

标签： json angular rest

【解决方案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));

如果某些字段是强制性的，你可以在构造函数中抛出错误

【讨论】：

【解决方案2】：

在代码行下面重写你

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

作为

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

您可以为数据指定类型，它会相应地自动转换所有对象。

【讨论】：

那不会编译，指定类型也没用，因为 TypeScript 已经知道它是一个 Box。
我试过你的解决方案，我现在在数据下得到一条红线：错误是：找不到名称数据
Put (data:Box) 喜欢它，或者您可以使用管道将您的数据映射为 BOX 对象