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

【问题标题】：Angular 8 - How to push one model data to another modelAngular 8 - 如何将一个模型数据推送到另一个模型
【发布时间】：2020-11-25 09:01:31
【问题描述】：

我有一个页面，我有 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);
  }

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

【问题讨论】：

如果你也能分享一些html来看看结构如何
还有什么不工作？按保存时没有添加数据？你有什么错误吗？

标签： angular typescript angular8

【解决方案1】：

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

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

【讨论】：