angular - 我无法通过 DTO 模式组织数据并将数据发送到 angular2 上的服务

Question

我是 angular2/fronted 开发的学生

我正在创建一个页面来替换 3 个产品

获取 id 选择 1 获取 id 选择 2 使用复选框获取 1 个或多个产品 ID

将产品 ID 从 id select 1 替换为 id select 2

但我不确定如何通过 DTO 将这些数据发送到我的update.service.ts

如果你能帮助我感激，请按照我的代码

update.component.html

<app-vo-modal keyTitle="Update" keySubtitle="" (onFinished)="onModalConfirm() >


    <form [formGroup]="form">
        <div class="form-group">
            <label class="required">Choose product</label>
            <app-vo-select [itens]="productItens" (valueChanged)="getValueSubstitute($event)" formControlName="currentProduct"></app-vo-select>
        </div>
    </form>


    <div>
        <tbody>
        <table class="table table-striped text-center">
            <thead>
          <tr>
            <th><input type="checkbox" [(ngModel)]="isMasterSel" name="name" value="checkbox" (change)="checkUncheckAll()"/>
            </th>
            <th>Id</th>
            <th>Name</th>

          </tr>
        </thead>
        <tbody>
                <tr class="text-center" *ngFor="let prod of showTable; index as i">
                    <td>
                        <input type="checkbox" [(ngModel)]="prod.isSelected" name="table" value="{{prod.id}}" (change)="isAllSelected()"/>
                    </td>
                    <td>{{prod.id}}</td>
                    <td>{{prod.name}}</td>
                </tr>
            </tbody>
    </table>
</div>
    <form [formGroup]="form">
        <div class="form-group">
            <label class="required">Choose product the substitute</label>
            <app-vo-select [itens]="productItens" formControlName="newProduct" (valueChanged)="getValueReplace($event)"></app-vo-select>
        </div>
    </form>
</app-vo-modal>

更新组件.ts

export class UpdateComponent implements OnInit {


    products: UpdateModelComponent[] = [];
    showTable: UpdateModelComponent[] = [];
    productItens: SelectOption[];
    form: FormGroup;
    isMasterSel: boolean;
    categoryList: any;
    checkedCategoryList: any;

    @Output()
    valueChanged: EventEmitter<any> = new EventEmitter<any>();

    @Output()
    dataSave = new EventEmitter<any[]>();


    constructor(
        private service: UpdateModelComponent,
        private fb: FormBuilder,
        ) {


    getValuesubstitute(id: number) {
        this.service.childProduct(id).
        subscribe((element: EntityBase<UpdateModelComponent>) => {
            this.showTable = element.content;
        });
    }

    getValueReplace(id: number) {
        console.log(id);
    }

 
    ngOnInit() {
       
        this.form = this.fb.group({
            newProduct: this.fb.control('', Validators.required),
            currentProduct: this.fb.control('', Validators.required),
        });

        this.service.parentProduct().
        subscribe((element: EntityBase<UpdateModelComponent>) => {
            this.products = element.content;
            console.log(this.products);
            this.productItens =  this.products.map(t => ({  id: t.id.toString(), text: t.nome }));
        });
    }

     onModalConfirm() {
        
        const a = new UpdateModelComponent();
        this.service.save(a).subscribe(r => {
        });
    }

    checkUncheckAll() {
            for (let i = 0; i < this.showTable.length; i++) {
              this.showTable[i].isSelected = this.isMasterSel;
            }
              this.getCheckedItemList();
    }

    isAllSelected() {
            this.isMasterSel = this.showTable.every(function(item: any) {
                return item.isSelected === true;
              });
            this.getCheckedItemList();
    }

    getCheckedItemList() {
        this.checkedCategoryList = [];
        for (let i = 0; i < this.showTable.length; i++) {
            if (this.showTable[i].isSelected) {
                this.checkedCategoryList.push(this.showTable[i]);
            }
        }

        const idsProducts = this.checkedCategoryList.map(check => check.id);
> result: [2225, 2226]
    }
}

更新.model.ts

export class UpdateModelComponent {

    public id: number;
    public name: string;
    public isSelected = false;

    public idsProducts: [];
    public currentProduct: number;
    public newProduct: number;
}

更新服务.ts

export class UpdateService {

    PATH = '/server/api/product';

    constructor(protected httpClient: HttpClient) { }

    childproduct(page?: Paging): Observable<EntityBase<UpdateModelComponent>> {

        if (!page) {
            page = new Paging();
        }
        return this.httpClient.get<EntityBase<UpdateModelComponent>>(`${this.PATH}/${paginacao.toString()}`);
    }

    parentProduct(id: number): Observable<EntityBase<UpdateModelComponent>> {
        return this.httpClient.get<EntityBase<UpdateModelComponent>>(`${this.PATH}/v2/${id}`);
    }

    save(components: UpdateModelComponent): Observable<any> {
        return this.httpClient.put<any>(`${this.PATH}`, components);
    }
}

标签： angulartypescriptfrontend