当用户单击角8(数据服务)时，发射无法工作。

Question

我正在处理父到子的子输出，子输出将显示在Modal弹出窗口中。

从父母到孩子(首先)工作得很好。数据将与下面相同，因此当用户从第一个子节点单击Department列表时，数据必须在模式窗口中填充

这就是我的尝试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>();