在打字稿中将嵌套对象模型作为请求参数传递答案

【问题标题】：Pass nested object model as request paramters in typescript在打字稿中将嵌套对象模型作为请求参数传递
【发布时间】：2021-05-15 21:50:16
【问题描述】：

我正在尝试使用打字稿中的模型结构传递请求参数。如果对象没有嵌套，我可以这样做。但是如果对象是嵌套数组，如下所示，我无法分配值并作为请求参数传递。如果有人有任何建议，请告诉我。提前致谢！

export class exampleModel{

    products: [
        {
            name: string,
            address:string,
            product_sizes: [
                {
                    quntity: number,
                    price: number,
                    id: [
                        number
                    ]
                }
            ]
        }
    ]

}

创建这样的模型后，我正在初始化模型如下

  productRequestObject : exampleModel = <exampleModel>{}

然后尝试给它赋值

    this.productRequestObject.products[0].name = sessionStorage.getItem('name')

在这里我得到了Cannot read property '0' of undefined的错误

如果我遗漏了什么，请告诉我！

【问题讨论】：

如果将其初始化为一个空对象，那么由于没有任何产品/名称属性，因此会出现该错误。
产品数组为空。这就是您收到此错误的原因。尝试为产品填充一些日期并尝试为第一个元素分配名称

标签： angular typescript api model

【解决方案1】：

您初始化一个空对象。虽然您知道结构，但它目前没有字段projects。一种正确的方法是预定义接口和模型。然后根据它们的嵌套结构实例化并组装它们，就像拼图一样。

在interfaces.ts中定义你的接口

export interface IProductSize {
    quantity: number;
    price: number;
    id: Array<number>;
}

export interface IProduct {
    name: string;
    address:string;
    product_sizes: Array<IProductSize>;
}

export interface IRequest {
    products: Array<IProduct>;
}

export interface IExampleModel {
    requests: Array<IRequest>;
}

有了这个，在models.ts中定义你的类

export class ProductSize implements IProductSize {
    constructor(
        public quantity: number,
        public price: number,
        public id: Array<number>){}
}

export class Product implements IProduct {
    constructor(
        public name: string,
        public address:string,
        public product_sizes: Array<IProductSize>){}
}

export class Request implements IRequest {
    constructor(public products: Array<IProduct>){}
}

export class ExampleModel implements IExampleModel {
    constructor(public requests: Array<IRequest>){}
}

现在您可以继续组装您的对象了。

let productSize: IProductSize = new ProductSize(0, 0, []);
let product: IProduct = new Product('', '', [productSize]);
let request: IRequest = new Request([product]);
let productRequestObject: IExampleModel = new ExampleModel([request]);

最后你可以访问该字段

 this.productRequestObject.products[0].name = sessionStorage.getItem('name');

这就是您在 Angular 中应该这样做的方式。这样您就可以完全灵活地控制嵌套结构的每一层。

【讨论】：

完美解释！谢谢！