доступ к данным из дочернего модального окна к родительскому компоненту angular

Question

У меня есть данные в двух таблицах слева и справа, если пользователь щелкнет ссылку из родительского компонента, появится модальное всплывающее окно, если я выберу любую радиокнопку из окна, которое должно отображаться с выбранной ссылкой в ​​родительском щелкнув по кнопке соответствия.

Вот мой код для родительского компонента html.

div class="row">
            <div style="width: 50%;float:left">
                <table mat-table [dataSource]="countryTableDisplay" >  
                    <!-- Site Number -->
                    <ng-container matColumnDef="site">
                        <th mat-header-cell *matHeaderCellDef > Site </th>
                        <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.siteNumber}}
                        </td>
                    </ng-container>
                    <!-- IBT Details -->
                    <ng-container matColumnDef="ibtInstitutionNamePIName">
                        <th mat-header-cell *matHeaderCellDef > IBT - Institution Name / PI Name </th>
                        <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.ibtInstitutionName}} / {{element.ibtInvestigatorFullName}}                            
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="action">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell class="mat-cell" *matCellDef="let element; let i = index">
                            <a (click)="openDialog(element,i)"><span class="icon"><i class="fas fa-link"></i></span></a>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="columnsToDisplay;"></tr>
                    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
                </table >
            </div>
            <div style="width: 50%;float:right">
                    <table  mat-table [dataSource]="cTMSTableDisplay">
                        <!--CTMS Details -->
                        <ng-container matColumnDef="ctmsInstitutionNamePIName">
                            <th mat-header-cell *matHeaderCellDef> CTMS - Institution Name / PI Name</th>
                            <td mat-cell class="mat-cell" *matCellDef="let element">
                                <span *ngIf="!ctmsMatch">Match Sites</span>
                                <span *ngIf="ctmsMatch">{{element.ctmsInstitutionName}} / {{element.ctmsInvestigatorFullName}}</span>
                            </td>  
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="columnCTMStoDiplay;"></tr>
                        <tr mat-row *matRowDef="let row; columns: columnCTMStoDiplay;"></tr>
                    </table> 
            </div>
        </div>

Component TS Code

        displayTable(bcnumber, selectedValue){ 
      console.log(bcnumber, selectedValue);
      const ibtData = this.dataService.getIbtDetails(this.bcnumber, this.selectedValue).subscribe(response => {  
        console.log(ibtData);
        this.countryTableDisplay = new MatTableDataSource<IbtList>(response);
        console.log(this.countryTableDisplay);
      }); 
      this.unsubscribe.push(ibtData);


      const ctmsData = this.dataService.getCTMSDetails(this.bcnumber, this.selectedValue).subscribe(response => {  
        console.log(ctmsData);
        this.cTMSTableDisplay = new MatTableDataSource<CtmsList>(response);
        this.ctmsDisplay = response;
        console.log(this.ctmsDisplay);
      }); 
      //this.unsubscribe.push(ctmsData);
      }

            openDialog(element,i): void {
    const dialogRef = this.dialog.open(DialogCTMSComponent, {
      data: {cTMSTableDisplay:this.ctmsDisplay, title:element.ibtInstitutionName + ' / ' + element.ibtInvestigatorFullName, result:this.matchList}

    });
    console.log(this.data);
    dialogRef.afterClosed().subscribe(result => {
      this.result[i]= result;
      console.log(this.result[i]);
      // this.result[i] = result;

    });

Child HTML Страница

      <h5>IBT-Institution Name / PI Name</h5>
  <span>{{ctmsDisplay.title}}</span>
  <table>
    <tr *ngFor="let column of ctmsDisplay.cTMSTableDisplay">
      <td>
        <input type="radio" name="ctms" (change)="getCtmsValue(column)" value="ctmsList">
      </td>
      <td>
          {{column.ctmsInstitutionName}} / {{column.ctmsInvestigatorFullName}} 
      </td>
    </tr>
  </table>
    </div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
  <button type="button" class="btn btn-primary" [mat-dialog-close]="ctmsDisplay.result">Match</button>
</div>  

Дочерний компонент ts

    public columnCTMStoDiplay: string[] = ['select','ctmsInstitutionNamePIName'];
  selectRadio: String;
  constructor(private dialogRef: MatDialogRef<MatchSiteComponent>,@Inject(MAT_DIALOG_DATA) public ctmsDisplay:any) {

  }

  ngOnInit() {
    console.log(this.ctmsDisplay.cTMSTableDisplay);
  }

  getCtmsValue(column){
    this.ctmsDisplay.result = column.ctmsInstitutionName + ' / ' + column.ctmsInvestigatorFullName;

  }

  displayParent(){
    this.dialogRef.close();
  }

  close() {
    this.dialogRef.close();
  }

Answer 1

Если я правильно вас понял, вы хотите подключить значение радиовхода к родительской мат-таблице ... вы можете сгенерировать сервис со свойством BehaviorSubject типа "ctmsList", вставить его в оба компонента, а затем в родительском элементе подписываются на каждое передаваемое значение от дочернего к родительскому

transportInfo.service.ts

export class ...
...
private transport = new BehaviorSubject('init Value')
public msg = this.transport.asObservable();
...
newMsg(value: any){
 this.transport.next(value)
}

parent.component. ts

// service injected ...
ngOnInit(){
this.service.msg.subscribe((val :any) => {
  console.log(val);
}

Child.component.ts

// service injected
getCtmsValue(column){
this.service.newMsg(column);
}