优化大型Angular表格网格：解决Angular 4.4编辑表格性能问题

Hey there, let's tackle this Angular 4.4 performance issue you're hitting with your editable table grid. 200 rows × 10 columns means 2000 form controls, and naive usage of *ngFor and [(ngModel)] is definitely going to trigger lag because of how Angular's change detection works out of the box. Here are the most impactful fixes you can implement right away:

1. Add trackBy to Your *ngFor Loops #

By default, Angular re-renders every row/column in your table whenever the rows or columns arrays change (even if only one item is updated). The trackBy function tells Angular how to uniquely identify items, so it only re-renders the rows/columns that actually change.

Component Code: #

trackByRow(index: number, row: any): any {
  // Use a unique identifier from your row object (e.g., row.id)
  return row.id || index;
}

trackByColumn(index: number, column: any): any {
  return column.index || index;
}

Template Code: #

<tr *ngFor="let row of rows; trackBy: trackByRow">
  <td *ngFor="let column of columns; trackBy: trackByColumn">
    <!-- Your ngSwitch content here -->
  </td>
</tr>

2. Switch to OnPush Change Detection #

Angular's default Default change detection strategy checks every component in the tree on every event (like input typing, button clicks, etc.). Switching to OnPush tells Angular to only run change detection when:

• An input property of the component changes (and it's a reference change, not just a value mutation)
• An event is emitted from the component or its children
• You manually trigger it

Component Code: #

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

@Component({
  selector: 'app-editable-table',
  templateUrl: './editable-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // Add this line
})
export class EditableTableComponent {
  rows: any[];
  columns: any[];

  // When updating rows, use immutable patterns to trigger OnPush:
  updateRowValue(row: any, columnIndex: string, newValue: any) {
    // Create a new row object instead of mutating the existing one
    const updatedRow = { ...row, [columnIndex]: { ...row[columnIndex], value: newValue } };
    // Create a new rows array instead of pushing/splicing
    this.rows = this.rows.map(r => r.id === row.id ? updatedRow : r);
  }
}

3. Replace [(ngModel)] with Unidirectional Binding #

Two-way binding with [(ngModel)] adds extra overhead by triggering change detection twice per input event. For large tables, switching to unidirectional binding + manual event handling can reduce this overhead.

Template Code (Replace ngModel): #

<ng-template [ngSwitchCase]="0">
  <!-- Instead of [(ngModel)]="row[column.index].value" -->
  <input 
    [value]="row[column.index].value"
    (input)="updateRowValue(row, column.index, $event.target.value)"
  >
</ng-template>

4. Implement Virtual Scrolling #

Rendering 200 rows at once is unnecessary—most users only see 20-30 rows in the viewport. Virtual scrolling only renders the rows that are visible, drastically reducing the number of DOM elements and change detection checks.

For Angular 4.4, you can use the angular2-virtual-scroll library (compatible with older Angular versions). Here's a quick setup:

Install the Library: #

npm install angular2-virtual-scroll --save

Template Example: #

<virtual-scroll [items]="rows" (update)="viewPortRows = $event">
  <tr *ngFor="let row of viewPortRows; trackBy: trackByRow">
    <!-- Your column content here -->
  </tr>
</virtual-scroll>

5. Split Cells into Dumb Components #

Break down your table into smaller, focused components (e.g., TableCellComponent) with OnPush change detection. This limits change detection to only the cells that actually update, instead of the entire table.

Example TableCellComponent: #

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

@Component({
  selector: 'app-table-cell',
  template: `
    <ng-container [ngSwitch]="column.columnType">
      <ng-template [ngSwitchCase]="0">
        <input 
          [value]="row[column.index].value"
          (input)="onInput($event.target.value)"
        >
      </ng-template>
      <!-- Add other column types (select, etc.) here -->
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableCellComponent {
  @Input() row: any;
  @Input() column: any;
  @Output() valueChange = new EventEmitter<{row: any, column: any, value: any}>();

  onInput(newValue: any) {
    this.valueChange.emit({ row: this.row, column: this.column, value: newValue });
  }
}

Parent Template Usage: #

<tr *ngFor="let row of rows; trackBy: trackByRow">
  <td *ngFor="let column of columns; trackBy: trackByColumn">
    <app-table-cell 
      [row]="row" 
      [column]="column"
      (valueChange)="updateRowValue($event)"
    ></app-table-cell>
  </td>
</tr>

Start with the first two optimizations (trackBy + OnPush)—they'll give you the biggest performance boost with the least effort. Then add virtual scrolling if you still need more improvement.

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