如果用户单击父级组件的链接,则在左右两个表中都有数据,如果我从窗口中选择任何单选按钮,则必须弹出与父级中所选链接对应的窗口,将打开模式弹出窗口。点击匹配按钮。
这是我的父组件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();
}
答案 0 :(得分:0)
如果我正确地理解了您,您想将单选输入的值连接到父垫表... 您可以使用类型为“ 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);
}