Я хочу, чтобы дочерние компоненты в angular отделяли Material Table (child) от других элементов (parent), но странная вещь заключается в том, что мне кажется, что я не могу получить данные от родителя или я получаю инициализированные данные от родителей и не могу обновить. Вот код: во-первых, родительский файл .ts:

@Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit{ ticketList: Ticket[] = []; originalTicketList: Ticket[] = []; filterAllForm: FormGroup; labelList: string[]; homeLabelList: string[]; currentTicketId: string; searchBy: string = ''; maxall : number = 100; isLoading :boolean = true; showRelatedTickets = true; constructor(private ticket: TicketService, private formBuilder: FormBuilder) { } ngOnInit() { this.filterAllForm = this.formBuilder.group({ startDate: [''], endDate: [''] }); this.getAllTicket(); } get filterFormControls() { return this.filterAllForm.controls; } getAllTicket() { let queryParams = ''; console.log(this.currentTicketId)   " "   this.searchBy; if (this.searchBy === 'id') { queryParams = 'id='   this.currentTicketId; this.showRelatedTickets = true; }else if(this.searchBy !== ''){ queryParams = this.searchBy   '='   this.currentTicketId; this.showRelatedTickets = false; } this.ticket.getAllTicket(queryParams).then((res: Ticket[]) ={amp}gt; { this.isLoading = false; this.ticketList = res; this.originalTicketList = this.ticketList; }); } searchTicket() { this.isLoading = true; this.getAllTicket(); } } 

родительский HTML, как это:

  {amp}lt;div class="ticket-container"{amp}gt; {amp}lt;mat-card *ngIf="isLoading" class="mat-card-style"{amp}gt; {amp}lt;mat-progress-spinner color="primary" mode="indeterminate"{amp}gt; {amp}lt;/mat-progress-spinner{amp}gt; {amp}lt;/mat-card{amp}gt; {amp}lt;div *ngIf="showRelatedTickets"{amp}gt; {amp}lt;app-dashboard-related-tickets-table [tablesource]="ticketList"{amp}gt; {amp}lt;/app-dashboard-related-tickets-table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div *ngIf="!showRelatedTickets"{amp}gt; {amp}lt;app-dashboard-non-related-tickets-table [tablesource]="ticketList"{amp}gt; {amp}lt;/app-dashboard-non-related-tickets-table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

и вы можете видеть двух детей, один из которых — app-dashboard-related-tickets-table, а другой — app-dashboard-non-related-tickets-table, они имеют другой формат и меняются кнопкой showRelatedTickets . Здесь я покажу первый дочерний файл (app-dashboard-related-tickets-table) .ts:

 @Component({ selector: 'app-dashboard-related-tickets-table', templateUrl: './dashboard-related-tickets-table.component.html', styleUrls: ['./dashboard-related-tickets-table.component.scss'] }) export class DashboardRelatedTicketsTableComponent implements OnInit, AfterViewInit{ dataSource: any; displayedDetailColumns = ['id', 'caseStatus', 'anchorPoint', 'findingSourceSystem','caseCreateTimestamp', 'resolvedBy', 'resolution', 'resolutionNote']; maxall: number = 100; @Input() tablesource: Ticket[]; @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; applyFilter(filterValue: string) { this.dataSource.filter = filterValue.trim().toLowerCase(); } constructor() { } ngOnInit() { console.log(this.tablesource); this.dataSource = new MatTableDataSource(this.tablesource); } ngAfterViewInit(){ this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; this.getPageSizeOptions(); } getPageSizeOptions(): number[] { if (this.dataSource.data.length{amp}gt;this.maxall){ return [20, 50, this.dataSource.data.length]; }else{ return [20, 50, this.maxall]; } } } 

затем дочерний файл (app-dashboard-related-tickets-table) .html:

 {amp}lt;table mat-table matTableExporter [dataSource]="dataSource" matSort class="mat-elevation-z8" #exporter="matTableExporter"{amp}gt; {amp}lt;!-- Ticket Column --{amp}gt; {amp}lt;ng-container matColumnDef="id"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"{amp}gt; SIR ID {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-id-source"{amp}gt; {amp}lt;a href='ticket/{{element.id}}'{amp}gt;{{element.id}}{amp}lt;/a{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;!-- Type Column event source --{amp}gt; {amp}lt;ng-container matColumnDef="findingSourceSystem"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-id-source"{amp}gt; Source {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-id-source"{amp}gt; {{element.findingSourceSystem}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;!-- Type Column Related Event count --{amp}gt; {amp}lt;ng-container matColumnDef="anchorPoint"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef class="mat-column-related-ticket-num"{amp}gt; Related Cases {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-related-ticket-num"{amp}gt; {{element.relatedVertices}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;!-- Type Column event source --{amp}gt; {amp}lt;ng-container matColumnDef="caseStatus"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-case"{amp}gt; Case Status {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-case"{amp}gt; {{element.caseStatus}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;!-- Type Column event source --{amp}gt; {amp}lt;ng-container matColumnDef="caseCreateTimestamp"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-column-date"{amp}gt; Case Created {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-date"{amp}gt; {{element.caseCreateTimestamp | date:'MMM d, y, h:mm:ss a'}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;ng-container matColumnDef="resolvedBy"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef class="mat-column-resolvedBy"{amp}gt; Resolved By {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-resolvedBy"{amp}gt; {{element.resolvedBy}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;ng-container matColumnDef="resolution"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef class="mat-column-closeCode"{amp}gt; Close Code {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-closeCode"{amp}gt; {{element.resolution}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;ng-container matColumnDef="resolutionNote"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef class="mat-column-closeNote"{amp}gt; Close Note {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element" class="mat-column-closeNote"{amp}gt; {{element.resolutionNote}} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"{amp}gt;{amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;mat-paginator [pageSizeOptions]="getPageSizeOptions()" showFirstLastButtons{amp}gt;{amp}lt;/mat-paginator{amp}gt; {amp}lt;button mat-raised-button (click)="exporter.exportTable('csv')" class="export-button"{amp}gt;Export Results{amp}lt;/button{amp}gt; 

Поэтому в дочернем компоненте я использую @input tablesource и отображаю dataSource. но результат таков: введите описание изображения здесь

Дочерний компонент, кажется, загружен, потому что кнопка результата экспорта уже есть, но таблица не отображается. Я просто делаю

 console.log(tablesource) 

Я получил []

Это журнал консоли браузера: введите описание изображения здесь Любая идея, что случилось?

Я пытался воспроизвести здесь: https://stackblitz.com/edit/angular-hbzpvr, но я извиняюсь, я не очень хорош в угловых, поэтому я не уверен, как загрузить родителя на страницу.

Согласно выводу вашей консоли, вы используете tablesource в своем дочернем компоненте до того, как он был обновлен родительским компонентом. Вместо создания datasource в ngOnInit дочернего компонента, определите свойство datasource tablesource как установщик и создайте datasource в этом установщике:

 @Input() set tablesource(value: Ticket[]) { console.log(value); this.dataSource = new MatTableDataSource(value); } 

Смотрите этот стек для демонстрации.