Как отобразить объекты (DTO) на стороне клиента?

Question

• Машинопись
• ABP + .NET Core

Я использую сетку для вставки строк (сетка, которую я использую, является компонентом фреймворка DevExtreme). Во всяком случае, как и в других сетках, это повышает onRowInserting события, когда записи вставляются, предоставляя вставленную строку в качестве параметра. Мне нужно преобразовать этот "анонимный" объект (вставленные данные) в мой DTO на стороне клиента в этом случае.

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

Чтобы лучше понять, чего мне нужно достичь, прочитайте этот пост:

Добавить строки в сетку DevExtreme (угловая) - модель / схема

РЕДАКТИРОВАТЬ

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://imgur.com/ihVZrDh

Я не уверен, что я сделал в линии let mynewrow: ItemDto, Я не знаю, правильно ли это, или достаточно ли позже использовать переменную, передав ее службе, которая сохраняет новую строку.

Answer 1

Если вы хотите использовать модуль automapper-ts npm с webpack напрямую вместо angular-cli, вы должны выполнить следующие шаги:

1. Установить модуль с npm install --save automapper-ts,

2. Определите automapper как глобальную переменную внутри массива плагинов вwebpack.config.js:

   new webpack.ProvidePlugin({
       automapper: 'automapper-ts'
   })
   

3. В вашем компоненте, где вы хотите использовать функции autopper, сделайте следующее (например, угловой компонент):

   import { Component } from '@angular/core';
   import { } from "automapper-ts";
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   export class AppComponent {
   
       constructor() {
           var objA = { prop1: 'From A', prop2: 'From A too', prop3: 'Also from A (really)' };
   
           automapper
               .createMap('sourceType', 'destinationType')
               .forMember('prop1', function (opts) { opts.mapFrom('prop2'); })
               .forMember('prop2', function (opts) { opts.ignore(); })
               .forSourceMember('prop3', function (opts) { opts.ignore(); })
               .forMember('prop4', function () { return 12; })
   
           var objB = automapper.map('sourceType', 'destinationType', objA);
   
           console.log(objB);
       }
   }
   

Вы можете обратиться к использованию AutoMapper в Angular2 для лучшего понимания.

Answer 2

Вы можете использовать декораторы и сериализаторы. Смотрите lib для ts здесь: https://www.npmjs.com/package/serialize-ts

Answer 3

Как насчет использования object.assign()передать значения свойств из вашего объекта ответа JSON в нужный класс?