Angular 2中更新子组件md-table的问题求助

Hey there! Let's figure out why your md-table isn't updating when you perform an action in component1. I'll walk you through step-by-step solutions based on common frameworks (since you mentioned md-table, I'll start with Angular Material, which is the most common use case for that component).

1. Angular + Angular Material 场景 #

The core issue here is ensuring component1 can send data to component2, and that component2 detects the data change to refresh the table. Here are two reliable approaches:

方法一：父组件作为中间层传递数据 #

This is the most straightforward pattern for sibling components—use the parent component to handle data sharing:

• Component2: Define an @Input() to receive the list data, and bind it to the table's data source.
• Component1: Emit an event when the action is triggered, sending the new item to the parent.
• Parent Component: Listen for the event, update its own list state, and pass the updated list to component2.

Component1 Code

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'component1',
  template: `<button (click)="triggerAddItem()">Add New Entry to Component2</button>`
})
export class Component1Component {
  @Output() itemAdded = new EventEmitter<any>();

  triggerAddItem() {
    // Replace with your actual item creation logic
    const newEntry = { id: Date.now(), title: `Entry ${Date.now()}` };
    this.itemAdded.emit(newEntry);
  }
}

Parent Component Code

import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    <component1 (itemAdded)="handleNewItem($event)"></component1>
    <component2 [entryList]="entryList"></component2>
  `
})
export class ParentComponent {
  entryList: any[] = [];

  handleNewItem(newItem: any) {
    // *Critical*: Create a new array reference to trigger Angular's change detection
    this.entryList = [...this.entryList, newItem];
    // Avoid just pushing to the array—Angular won't detect the change!
  }
}

Component2 Code

import { Component, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'component2',
  template: `
    <table mat-table [dataSource]="tableDataSource">
      <!-- Define your table columns here -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let entry"> {{entry.id}} </td>
      </ng-container>
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let entry"> {{entry.title}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  `
})
export class Component2Component {
  @Input() set entryList(list: any[]) {
    // Update the table's data source whenever the input changes
    this.tableDataSource.data = list;
  }
  tableDataSource = new MatTableDataSource<any>([]);
  displayedColumns = ['id', 'title'];
}

方法二：共享服务进行跨组件通信 #

If your components are in a deeper hierarchy or you want to avoid parent component coupling, use a shared service with reactive data streams:

Shared Service Code

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class EntryService {
  private entryListSubject = new BehaviorSubject<any[]>([]);
  entryList$ = this.entryListSubject.asObservable();

  addEntry(newEntry: any) {
    const currentList = this.entryListSubject.value;
    this.entryListSubject.next([...currentList, newEntry]);
  }
}

Component1 Code (Updated)

import { Component } from '@angular/core';
import { EntryService } from './entry.service';

@Component({
  selector: 'component1',
  template: `<button (click)="triggerAddItem()">Add New Entry to Component2</button>`
})
export class Component1Component {
  constructor(private entryService: EntryService) {}

  triggerAddItem() {
    const newEntry = { id: Date.now(), title: `Entry ${Date.now()}` };
    this.entryService.addEntry(newEntry);
  }
}

Component2 Code (Updated)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { EntryService } from './entry.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'component2',
  template: `<!-- Same table template as before -->`
})
export class Component2Component implements OnInit, OnDestroy {
  tableDataSource = new MatTableDataSource<any>([]);
  displayedColumns = ['id', 'title'];
  private subscription!: Subscription;

  constructor(private entryService: EntryService) {}

  ngOnInit() {
    // Subscribe to the service's data stream to update the table
    this.subscription = this.entryService.entryList$.subscribe(list => {
      this.tableDataSource.data = list;
    });
  }

  ngOnDestroy() {
    // Clean up the subscription to prevent memory leaks
    this.subscription.unsubscribe();
  }
}

2. React + Material-UI 场景（Bonus） #

If you're using React instead, the same logic applies with state lifting or Context:

State Lifting Example #

// ParentComponent.jsx
import { useState } from 'react';
import Component1 from './Component1';
import Component2 from './Component2';

export default function ParentComponent() {
  const [entryList, setEntryList] = useState([]);

  const handleAddEntry = (newEntry) => {
    setEntryList(prevList => [...prevList, newEntry]);
  };

  return (
    <div>
      <Component1 onAddEntry={handleAddEntry} />
      <Component2 entryList={entryList} />
    </div>
  );
}

// Component1.jsx
export default function Component1({ onAddEntry }) {
  const addEntry = () => {
    const newEntry = { id: Date.now(), title: `Entry ${Date.now()}` };
    onAddEntry(newEntry);
  };

  return <button onClick={addEntry}>Add New Entry</button>;
}

// Component2.jsx
import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

export default function Component2({ entryList }) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>ID</TableCell>
          <TableCell>Title</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {entryList.map(entry => (
          <TableRow key={entry.id}>
            <TableCell>{entry.id}</TableCell>
            <TableCell>{entry.title}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

Common Troubleshooting Tips #

• Angular: Never modify the array directly (e.g., push() without updating the reference)—Angular's change detection relies on reference changes. Always create a new array.
• Angular Material: Ensure you're updating the data property of MatTableDataSource; don't try to mutate the existing data array.
• React: Always update state immutably (use spread operators or concat() instead of push()).

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