angular - วิธีแมปอ็อบเจ็กต์ (DTO) ทางฝั่งไคลเอนต์?

• ไทป์สคริปต์
• ABP + .NET Core

ฉันกำลังใช้กริดเพื่อแทรกแถว (กริดที่ฉันใช้เป็นคอมโพเนนต์ของเฟรมเวิร์ก DevExtreme) อย่างไรก็ตาม คล้ายกับกริดอื่น ๆ มันจะเรียกใช้อีเวนต์ onRowInserting เมื่อมีการแทรกเรคอร์ด โดยจะส่งแถวที่ถูกแทรกเป็นพารามิเตอร์ ฉันจำเป็นต้องแปลงวัตถุ "ไม่ระบุชื่อ" นั้น (ข้อมูลที่ถูกแทรก) ให้เป็น DTO ฝั่งไคลเอนต์ในอีเวนต์นี้

onRowInserting(e) {
    let mynewrow: ItemDto = e.data; // e.data contains the inserted row
}

เพื่อที่จะเข้าใจให้ดีขึ้นว่าฉันต้องทำอะไรให้สำเร็จ โปรดอ่านโพสต์นี้:

เพิ่มแถวในตาราง DevExtreme (angular) - แบบจำลอง/โครงสร้าง

แก้ไข

ItemDto:

export class ItemDto implements IItemDto {
    description: string;
    note: string;
    quantita: number;
    postId: number;
    id: number;

    constructor(data?: IItemDto) {
        if (data) {
            for (var property in data) {
                if (data.hasOwnProperty(property))
                    (<any>this)[property] = (<any>data)[property];
            }
        }
    }

    init(data?: any) {
        if (data) {
            this.description = data["description"];
            this.note = data["note"];
            this.quantita = data["quantita"];
            this.postId = data["postId"];
            this.id = data["id"];
        }
    }

    static fromJS(data: any): ItemDto {
        let result = new ItemDto();
        result.init(data);
        return result;
    }

    toJSON(data?: any) {
        data = typeof data === 'object' ? data : {};
        data["description"] = this.description;
        data["note"] = this.note;
        data["quantita"] = this.quantita;
        data["postId"] = this.postId;
        data["id"] = this.id;
        return data; 
    }

    clone() {
        const json = this.toJSON();
        let result = new ItemDto();
        result.init(json);
        return result;
    }
}

export interface IItemDto {
    description: string;
    note: string;
    quantita: number;
    postId: number;
    id: number;
}

และด้านล่าง คือเนื้อหาของ e.data (ในตอนนี้ ฉันได้เพิ่มเฉพาะบางคอลัมน์ลงในกริดแล้ว ดังนั้นจึงไม่ได้มีทุกฟิลด์)

Object {
    __KEY__: "7c2ab8-1ff6-6b53-b9d7-ba25c27"
    description: "mydescription"
    id: 32
    note: "mynote"
    postId: 4
    quantita: 2
     >  __proto__: Object { constructor; , _defineG....
}

ภาพนี้แสดงวัตถุได้ดีกว่า: https://i.sstatic.net/XkEB1.jpg

ฉันไม่แน่ใจว่าฉันทำอะไรในบรรทัด let mynewrow: ItemDto ฉันไม่รู้ว่ามันถูกต้องหรือไม่ หรือเพียงพอสำหรับการใช้ตัวแปรนี้ในภายหลัง โดยการส่งไปยังบริการที่บันทึกแถวใหม่

คำตอบ #1

คุณสามารถใช้ตัวตกแต่งและตัวแปลงข้อมูล โปรดดูไลบรารีสำหรับ ts ที่นี่: https://www.npmjs.com/package/serialize-ts

คำตอบ #2

แล้วถ้าใช้ object.assign() เพื่อส่งค่าของคุณสมบัติจากอ็อบเจ็กต์การตอบสนอง JSON ของคุณไปยังคลาสที่คุณต้องการล่ะ?

class thingy {
  a = null;
  print = function() {
    console.log(this.a);
  };
}

const sourceJson = { 
  a: "hello world" 
};

const target = Object.assign(new thingy(), sourceJson);

target.print()