该服务检索JSON对象数组的工作原理如何？为什么不映射到摩尔对象？

编程问答 2022-08-15

问题描述

我在Angular中还很陌生，我对此情况有多怀疑：

在我的组件代码中，我有这样的东西：

orders: Order[];

ngOnInit() {

    this.ordeRSService.getAllOrders().then(orders => {
        this.orders = orders;
        console.log("RETRIEVED ORDERS: ",orders);
        this.loading = false;
});

如您所见，我正在定义 Order 模型对象的数组。

然后进入 ngOnInit（）方法中，我正在使用以下 getAllOrders（）服务方法来检索此数组：

getAllOrders() {
    return this.http.get<any>('assets/json_mock/ordini.json')
        .toPromise()
        .then(res => <Order[]>res.data)
        .then(data => { return data; });
}

这基本上是从JSON文件中检索值。

现在...从Java来看，我对它在Angular \ TypeScript中的工作方式有疑问。我的想法是必须在 ordini.json 文件中定义的对象映射到 Order 模型对象。

这是我的 Order 模型界面：

export interface Referent {
  name?: string;
  surname?: string;
  role?: string;
}

export interface Company {
  name?: string;
  vat?: string;
  bu?: BU;
}

export interface BU {
  name?: string;
  code?: string;
}

export interface OrderDetails {
  dataInserimento?: Date;
  commesse?: Array<string>;
  identificativoContrattoHyperlink?: string;
  tipologiaContratto?: string;
  presenzaAQ?: string;
  identificativoAQHyperlink?: string;
  accordoQuadro?: string;
  importoContratto?: number;
  residuoAQ?: number;
  compagineDiAQ?: number;
  quotaPercentualeDiRTI?: number;
  tipologiaDiPartecipazione?: string;
  cig?: string;
  cliente?: string;
  vatCliente?: string
  clienteFinale?: string;
  vatClienteFinale?: string;
  dataSottoscrizioneContratto?: string;
  dataInizioAttivita?: Date;
  dataFineAttivita?: Date;
  statoOrdine?: string;

}

export interface Order {
  id?: number;
  name?: string;

  company?: Company;
  dettaglioOrdine?: OrderDetails;

}

如您所见，我有一个 Order 接口，其中包含一些字段（有时定义为其他界面）。

这是我的JSON文件内容：

{
  "data": [
    {
      "id": 1,"referente": {
        "name": "Mario","surname": "Rossi","complete_name": "Mario Rossi","role": "Operation Manager"
      },"company": {
        "name": "TEST S.p.A.","VAT": "IT 03318271214","BU": {
          "name": "Digital Solution","code": "DS"
        }
      },"dettaglio_ordine": {
        "data_inserimento": "2020-08-08","commessa": {
          "code": "AAA0001"
        },"identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST","tipologia_contratto": "ORDINE","presenza_AQ": true,"identificativo_AQ_hyperlink": "LINK-AQ-TEST","accordo_quadro": 12,"importo_contratto": 122000,"residuo_AQ": 20000,"compagine_di_AQ": "COMPAGINE-DI-AQ-TEST","quota_percentuale_di_RTI": 20,"tipologia_di_partecipazione": "Gara PUBBLICA","cig": "CIG-TEST-1","cliente": "CLIENTE-TEST-1","vat_cliente": "VAT-CLIENTE","cliente_finale": "CLIENTE-FINALE-TEST-1","vat_cliente_finale": "VAT-CLIENTE-FINALE","data_sottoscrizione_contratto": "8/12/2020","data_inizio_attivita": "2020-08-28","data_fine_attivita": "2020-08-30","stato_ordine": "CHIUSO"
      }
    },{
      "id": 2,"company": {
        "name": "DGS S.p.A.","BU": {
          "name": "Cyber Security","code": "CS"
        }
      },"dettaglio_ordine": {
        "data_inserimento": "2020-08-09","commessa": {
          "code": "AAA0002"
        },"presenza_AQ": false,"cig": "CIG-TEST-2","vat_cliente": "VAT CLIENTE TEST","cliente_finale": "CLIENTE-FINALE-TEST-2","vat_cliente_finale": "VAT-CLIENTE-FINALE-TEST","data_inizio_attivita": "8/28/2020","data_fine_attivita": "8/31/2020",{
      "id": 3,"referente": {
        "name": "Francesco Nicola","surname": "Romano","complete_name": "Francesco Nicola Romano","dettaglio_ordine": {
        "data_inserimento": "2020-08-10","cig": "CIG-TEST-3","cliente": "CLIENTE-TEST-3","vat_cliente": "XXX123","cliente_finale": "CLIENTE-FINALE-TEST-3","vat_cliente_finale": "YYY321","stato_ordine": "CHIUSO"
      }

    }
  ]
}

基本上，这是一个对象数组。我最初的想法是，必须将.json文件数组中定义的每个JSON对象完美地映射到 Order 模型接口描述的对象上，因为在组件中，我定义了 orders 变量作为 Order 的数组：

orders: Order[];

但是似乎它不能以这种方式工作。

我的服务类正确地获取了返回数组的信息，但是此数组似乎包含JSON对象，而不包含 Order 字段。

为什么？我想念什么？在模型对象上映射JSON对象的正确方法是什么？而且是否正确，或者使用此JavaScrip \ JSON对象作为模型对象避免了此步骤，在Angular中可以接受吗？

解决方法

Typescript不会不修改您的对象。这些类型仅用于更好地了解数据的形状并防止错误。

所以在这一行：

   .then(res => <Order[]>res.data)

您只需告诉打字稿“ res.data的内容为Order []类型。从现在开始就将其视为”。定义适当的类型取决于您。

如果您需要映射json响应以匹配您的类型，则需要做的是：

  • 定义结果类型（Order）和代表您从api检索的数据的类型（ApiOrder）

  • 声明执行转换的方法

const transformOrder = (apiOrder: ApiOrder): Order => {
 return { .. your order object ... }
}
  • 接收数据时执行转换
.then(res => <ApiOrder[]>res.data)
.then(data: ApiOrder[] => { return data.map(transformOrder); });
angularangularangular-jsontypescripttypescripttypescript