emit не работает, когда пользователь нажимает angular 8 (dataservice)

Question

Я работаю над выводом от родителя к дочернему элементу, вывод дочернего элемента будет отображаться в модальном всплывающем окне.

От родительского до дочернего (первого) работает отлично. Данные будут такими же, как показано ниже, поэтому, когда пользователь щелкает список Отдел от первого дочернего элемента, данные должны заполняться в модальном окне

, это моя попытка modalpopup.ts

      export class ModalPopupTrialTypeComponent implements OnInit {
      public dataSource = new MatTableDataSource<TrialDetails>([]);
      private unsubscribe: Subscription[] = [];
      public columnsToDisplay: string[] = [ 'firstName', 'LastName', 'Address', 'Age', 'Designation', 'Salary'];
      @Input() trailData:EventEmitter<any> = new EventEmitter<any>();

      constructor(private dataService: DataService, private route: ActivatedRoute, private router: Router) { }
         ngOnInit() {

          }
          ngOnDestroy() {
            this.unsubscribe.forEach(sb => sb.unsubscribe());
          }    
      }

Вот что мой Html

<table class="nested-table" mat-table [dataSource]="trailData" multiTemplateDataRows matSort>
<ng-container matColumnDef="firstName">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
     <td mat-cell *matCellDef="let element" > {{element.firstName}}
     </td>
 </ng-container>
 <ng-container matColumnDef="lastName">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
     <td mat-cell *matCellDef="let element"> {{element.lastName}}
     </td>
 </ng-container>
 <ng-container matColumnDef="Address">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
     <td mat-cell *matCellDef="let element"> {{element.Address}}
     </td>
 </ng-container>
 <ng-container matColumnDef="Age">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
     <td mat-cell *matCellDef="let element"> {{element.Age}}
     </td>
 </ng-container>
 <ng-container matColumnDef="Designation">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Designation </th>
     <td mat-cell *matCellDef="let element"> {{element.Designation}}
     </td>
 </ng-container>
 <ng-container matColumnDef="Salary">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Salary </th>
     <td mat-cell *matCellDef="let element"> {{element.Salary}}
     </td>
 </ng-container>
 <tr mat-header-row *matHeaderRowDef="columnsToDisplay" style="display: none;" ></tr>
 <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
     [class.example-expanded-row]="isExpandedElement === element"
     (click)="isExpandedElement = isExpandedElement === element ? null : element">
 </tr>
 <tr mat-row *matRowDef="let row; columns: ['expanedDetail']" class="example-detail-row">
 </tr>

Пожалуйста, дайте мне знать, что я здесь делаю.

Answer 1

Эта ссылка может дать вам хорошее понимание взаимодействия компонентов:

https://angular.io/guide/component-interaction

Answer 2

Ваш компонент не излучает, потому что EventEmitter вместо него используется директива @Input @Output.

У вас должен быть декоратор @Input для заполнения таблицы и @Output для передачи данных от потомка к родителю.

Например:

@Input() trailData: TrialDetails;
@Output() emitToParent: EventEmitter<any> = new EventEmitter<any>();