데이터 그리드의 형제 구성 요소간에 데이터 공유

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 이벤트가 전지. 내 질문은 name 필드의 초점에서 id 데이터에 액세스해야하는 경우입니다. 어떻게해야합니까? 일부 행에 대한 name 제어가에

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

그래서 모든 I 권한이와 나는 같은 행에 대한 id 컨트롤이 필요합니다.

나는이 작업을 수행하는 다른 몇 가지 방법을 생각할 수 있습니다 : 이름 컨트롤의 HTML에서

1. 이 초점 밖으로 이벤트의 id 제어를 전달합니다. 비슷한 것 <input type="text" formControlName="name" onNameFocusout="(frm.controls.items.controls[i].controls.id, frm.controls.items.controls[i].controls.name)" />

2. 데이터 공유 서비스를 사용하십시오. 그리드에 입력 된 값은 모든 구성 요소에서 검색 할 데이터 공유 서비스에서도 사용할 수 있습니다. 그래도 데이터를 검색 할 행 인덱스를 알아야합니다.

이가 더 나은 방법으로 수행 할 수있는 방법에 대한 제안이나 이러한 방법 중 하나는 잘 작동합니다.

감사

Answer 1

당신이해야 흐림에 값을 얻을 수 :

템플릿 :

<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> 

Component 클래스 :

onBlur(control: FormControl) { 
    let value = control.value; 
    // value = value of id 
}