从子模态窗口访问数据到父组件角度

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>

组件ts代码

        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;

    });

子 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

如果我理解正确，您希望将无线电输入的值连接到父 mat-table... 您可以使用“ctmsList”类型的 BehaviorSubject 属性生成服务，将其注入到两个组件中，然后在父级中订阅从子级传递给父级的每个值

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);
}