Angular：子组件无法检测到父组件异步更新的数据问题求助

Hey Joe, let's break down why your child component isn't picking up the table data and fix it step by step! The core issue ties into Angular's asynchronous data flow and how we handle input changes.

1. Fix Initial Data State in Parent Component #

Right now, your tableInterventionsData starts as undefined. When Angular first renders the child component, it passes this undefined value, which can cause unexpected behavior. Initialize it to an empty array instead to ensure the child always receives a valid array type:

// Parent component
tableInterventionsData: Interventions[] = []; // Initialize with empty array

This gives the child component a valid starting point, and when your HTTP call completes, the array will update naturally.

2. Update ngOnChanges for Reliable Data Handling #

In your child component's ngOnChanges hook, use the currentValue from the changes object (instead of directly referencing this.data) to guarantee you're working with the latest updated value. Also, add a safety check to avoid setting the data source to undefined:

ngOnChanges(changes: SimpleChanges): void {
  // Handle column updates
  if (changes.columns?.currentValue) {
    this.visibleColumns = this.columns.map(column => column.property);
  }

  // Handle data updates safely
  if (changes.data) {
    const latestData = changes.data.currentValue;
    // Use empty array as fallback if data is null/undefined
    this.dataSource.data = latestData ?? [];
    console.log('Updated data source:', this.dataSource.data);
  }
}

The ?? nullish coalescing operator ensures we never pass invalid values to the data source—this is safer than || if you might intentionally use empty arrays.

3. Add Fallback Initialization in ngOnInit #

Sometimes, input values are already available when the child component initializes. Add fallback logic in ngOnInit to handle this scenario:

ngOnInit() {
  console.log('OnInit data:', this.data);
  console.log('OnInit columns:', this.columns);

  // Initialize columns if available on load
  if (this.columns) {
    this.visibleColumns = this.columns.map(column => column.property);
  }

  // Initialize data source if data is available on load
  if (this.data) {
    this.dataSource.data = this.data;
  }
}

4. Connect Paginator & Sort to Data Source #

You've already set up @ViewChild references for MatPaginator and MatSort, but you need to connect them to the data source in ngAfterViewInit to enable pagination and sorting:

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
}

5. Verify Child Component Template #

Double-check your child's template correctly binds to the visibleColumns and dataSource. It should look something like this:

<table mat-table [dataSource]="dataSource" matSort class="w-full">
  <!-- Dynamic Columns -->
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.property">
    <th mat-header-cell *matHeaderCellDef mat-sort-header 
        [ngClass]="column.cssClasses">{{ column.label }}</th>
    <td mat-cell *matCellDef="let row" 
        [ngClass]="column.cssClasses">{{ row[column.property] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="visibleColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: visibleColumns;"></tr>
</table>

<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[6, 12, 24]" showFirstLastButtons></mat-paginator>

With these changes, your child component will correctly receive and display the table data once the HTTP request completes. Let me know if you run into any other issues!

内容的提问来源于stack exchange，提问作者JoeDalton