Question

如何在兄弟组件之间传递数据？假设我有一种类似于这样的数据输入网格：

<tr *ngFor="let item of frm.controls.items.controls; let i=index" [formGroupName]="i">
   <td><input type="text" formControlName="id" /></td>
   <td><input type="text" formControlName="name" /></td>
</tr>

让我们说，有一些打字稿会在valueChanges或focusout事件上触发，该事件处理在每个字段中输入的数据。我的问题是，如果我需要访问id字段焦点中的name数据。我怎么能这样做？

onNameFocusout = function(nameControl) {
  //get a handle of id control for the ROW that this name control belongs to

所以我有权访问的是某行的name控件，我需要同一行的id控件。

我可以想到几种不同的方法来做到这一点：

在名称控件的html中，传递焦点输出事件中的id控件。像<input type="text" formControlName="name" onNameFocusout="(frm.controls.items.controls[i].controls.id, frm.controls.items.controls[i].controls.name)" />
使用数据共享服务。在网格中输入的任何值也可在数据共享服务上获得，以供任何组件检索。这仍然需要知道行的索引以从中检索数据。

有关如何以更好的方式完成此任务的建议或这些方法中的任何一种都可以正常工作。

由于

Answer 1

你应该能够获得模糊的价值：

模板：

#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

组件类：

<tr *ngFor="let item of frm.get('items'); let i=index" [formGroupName]="i">
   <td><input type="text" formControlName="id" /></td>
   <td><input type="text" (blur)="onBlur(frm.get('items.' + i + '.id'))" formControlName="name" /></td>
</tr>

在数据网格中的兄弟组件之间共享数据

1 个答案: