时间戳

首页 > 解决方案 > Angular 8 - 如何将一个模型数据推送到另一个模型

angular - Angular 8 - 如何将一个模型数据推送到另一个模型

问题描述

我有一个页面，我有 3 个输入字段和一个网格，该网格带有一个添加按钮以将数据添加到网格和一个保存按钮以保存整个数据，这里我想尝试的是当用户向网格添加一些数据时发出 API 请求时，它应该在本地保存数据，当用户单击保存按钮时，整个数据意味着网格数据加上这 3 个输入字段数据应该保存在数据库中。

父模型

export class ParentModel<GridModel> {
  parentId: number;
  totalDue: number;
  totalAmount: number;
  totalDiscount: number;
  childModel: GridModel[];

 constructor(init?: Partial<ParentModel<GridModel>>) {
  Object.assign(this, init);
 }
}

儿童模型

export class GridModel {
  parentId: number;
  childId: number;

  deliveyAmount: number;
  taxAmount: number;

 constructor(init?: Partial<GridModel>) {
  Object.assign(this, init);
 }
}

我的服务在模型之间共享数据

@Injectable({
  providedIn: 'root'
})
export class DataShareService{
  private parentSubject: BehaviorSubject<ParentModel<GridModel[]>> = new BehaviorSubject<ParentModel<GridModel[]>>(null);
  //Just in case if need to subscribe
  paretnt= this.parentSubject.asObservable();

constructor() { }

setGridData(griData: GridModel[]) {
  this.parentSubject.value.childModel = griData;
}

setParentData(parenData: ParentModel<GridModel[]>) {
  this.parentSubject.next(parenData);
}

get parentData(): ParentModel<GridModel[]> {
  return this.parentSubject.value;
 }
}

网格 ts 文件

  saveGridData() {
    this.dataShareService.setGridData(this.gridForm.value);
  }

父 ts 文件

  saveParentData() {
    this.dataShareService.setParentData(this.parentForm.value);
  }

但这并没有按预期工作，是我做错了什么还是有更好的方法来做到这一点

标签： angulartypescriptangular8

解决方案

这可以通过角度反应形式来完成。谷歌“动态反应形式”。这是角度的内置功能。单击添加按钮时，您可以将表单组添加到表单并在提交之前构建它

当您在一次提交中发送大量数据时，这也可能解决验证错误的挑战。每个表单域都会显示自己的错误。也是一个内置的角度特征

推荐阅读