如何禁用Angular Material表格输入/悬停时的全量渲染？

针对1700行Material表格在输入框悬停/输入时全量重渲染的问题，完全可以通过以下手段禁用不必要的全量更新，提升性能：

1. 启用OnPush变更检测策略 #

将表格组件的变更检测模式改为OnPush，只有当组件输入属性引用变化、自身事件触发或Observable订阅推送新值时，才会触发变更检测，大幅减少无效渲染。

在组件类的装饰器中配置：

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

@Component({
  // 其他配置项（如selector、templateUrl等）
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourTableComponent {
  // 组件业务逻辑
}

2. 配置trackBy函数优化行渲染 #

给表格行添加trackBy函数，让Angular通过数据的唯一标识（如id）跟踪行元素，仅重新渲染发生变化的行，而非全表更新。

模板修改： #

在mat-row节点上添加trackBy绑定：

<tr mat-row *matRowDef="let row; columns: displayedColumns; trackBy: trackById"></tr>

组件类实现trackBy函数： #

trackById(index: number, item: any): number {
  return item.id; // 用数据对象的唯一id作为跟踪标识
}

3. 优化输入框绑定与DOM规范 #

• 修复重复id/name问题：当前代码中输入框的id="quantity"和name="quantity"会在1700行中重复，违反HTML规范，可能引发不必要的DOM操作。改为动态生成唯一标识：

  <input type="number" 
         id="quantity-{{ddsVariable.id}}" 
         name="quantity-{{ddsVariable.id}}" 
         min="0" max="999999" 
         matInput class="input-value"
         [value]="ddsVariable.value" 
         (input)="handleEditRow(ddsVariable.id, $any($event).target.value)">
  

• 避免数据源引用突变：在handleEditRow中直接修改对应数据对象的属性，而非重新生成整个数组，确保OnPush策略下仅触发目标行的更新：

  handleEditRow(id: number, value: string): void {
    const targetItem = this.dataSource.data.find(item => item.id === id);
    if (targetItem) {
      targetItem.value = Number(value); // 直接修改对象属性，不改变数组引用
    }
  }
  

4. 避免模板中的频繁执行表达式 #

如果模板中存在函数调用、复杂计算等表达式，每次变更检测都会重复执行，建议将这些逻辑移到组件类中，通过属性存储计算结果后再绑定到模板。

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